常见网页文本特效代码汇总:变色文字特效和字符的背景特效
作者:一网学   最后更新时间:2014-04-19 14:50:57

常见网页文本特效代码汇总:变色文字特效和字符的背景特效


代码一:精彩的变色文字特效


<!--把如下代码加入<body>区域中-->


  <script language="JavaScript">






/* This script was made by Erik.  You can contact him me worfy@geocities.com or at my homepage www.geocities.com/Area51/Corridor/4090. I know that it doesn't look pretty in the source code, but that couldn't be helped.  Feel free to modify this script in any way but please give me credit.  This is my first real script.  


BTW  for you yankees, I spell colour with the U because I'm Canadain.*/






hexa = new MakeArray(16)


hexa[10] = "A"


hexa[11] = "B"


hexa[12] = "C"


hexa[13] = "D"


hexa[14] = "E"


hexa[15] = "F"




function MakeArray(n)


{


this.length = n


for (var i = 0; i <= n; i++)


this[i] = i


return this


}




function colours(text){




var posa = 0


var posb = 1


while (posa <= text.length){


var r = Math.floor(Math.random() * 15)


var rr= Math.floor(Math.random() * 15)


var g = Math.floor(Math.random() * 15)


var gg = Math.floor(Math.random() * 15)


var b = Math.floor(Math.random() * 15)


var bb = Math.floor(Math.random() * 15)


if (text.substring(posa,posb) == "<"){


var posaa = 0


posaa = posa


while (text.substring(posaa,posb) != ">"){


posaa++


posb++


}


document.write(text.substring(posa, posb))


posa = posb


posb = posa + 1


}


document.write("<font color=#"+hexa[r]+hexa[rr]+hexa[g]+hexa[gg]+hexa[b]+hexa[bb]+">")


document.write(text.substring(posa, posb)+"</font>")


posa++


posb++


}


}




</script>




  <script language = "javascript">




text = "This JavaScript shows every other letter of text as a different, random colour."


text +="You can also use any <blink> <font size=9> HTML </font> </blink> codes that you want"


text +=" As long as you don't use quotation marks and the commands have a space between them."


text +="  You can use any background colour or picture that you want, but black or white is sugeste"


text +="d <b> <u>HAVE FUN!!! </u> </b>"




colours(text)




</script>


代码二:字符的背景特效


<!--要完成此效果把如下代码加入到<body>区域中-->




<span id="theText" style="width:100%">


<h2 align="center"><font color="#ffffff">Welcome To You!!</font></h2>


</span><script>


var from = 5;


var to = 50;


var delay = 5;


var glowColor = "lime";


var i = to;


var j = 0;


textPulseDown();




function textPulseUp()


{


if (!document.all)


return


if (i < to)


{


theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";


i++;


theTimeout = setTimeout('textPulseUp()',delay);


return 0;


}




if (i = to)


{


theTimeout = setTimeout('textPulseDown()',delay);


return 0;


}






}




function textPulseDown()


{


if (!document.all)


return


if (i > from)


{


theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";


i--;


theTimeout = setTimeout('textPulseDown()',delay);


return 0;


}




if (i = from)


{


theTimeout = setTimeout('textPulseUp()',delay);


return 0;


}


}


</script>


上一篇:网页版面设计步骤和布局技巧指南

下一篇:HTML5代码学习:值得收藏的HTML5代码片段

其它免费教程

如何让公司的平面设计师交出可以用的WEB 图

时间:2014-05-30 点击:2340

在演讲的 QA 时间,有几位 F2E(前端工程师) 跑来问我这个问题,看来这是许多人心中的痛啊…甚至...

采用好方法,才能高效率设计好logo?【平面设计培训】

时间:2015-03-05 点击:1856

就以朵璞设计工作室为造动剧场设计Logo的过程为例,与大家分享个中点滴。这是个不可多得的正面案例,当...

寻找合适的网页背景大图有技巧,必学【网页设计培训】

时间:2015-03-17 点击:1580

大图片作为背景的设计风格,这种设计方式虽然非常强有力地抓住用户的注意力,能准确应用图片而达到更大的体...

新手快速全面掌握中性灰磨皮方法

时间:2014-03-18 点击:4700

中性灰磨皮是在双曲线基础上延伸的更加精细磨皮方法。操作方法跟双曲线一样,只是在观察组下面多了一个中性...

快速挖出圣诞节BANNER设计灵感的4个方法!

时间:2016-11-30 点击:2041

@TTTing1 :我们今天来讲一讲怎么挖掘设计灵感好伐?...

更多设计教程>>


在家就能免费试听
多了解下对你最终选择总是有帮助的
姓名:
电话:
Q Q:
答案:
邮箱:
留言:
提交试听申请