常见网页文本特效代码汇总:变色文字特效和字符的背景特效
作者:一网学   最后更新时间: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代码片段

其它免费教程

帮你如何高效工作的信息搜集及管理术

时间:2016-04-05 点击:1388

小编:今天这篇虽然是旧文,但实用价值仍然极高,特别是对于没有良好整理习惯的同学,这篇绝对让你大开眼界...

设计科普!给设计师的模块化设计新手完全入门指南!

时间:2015-08-15 点击:1110

扁平化设计流行起来之后,现代简约风与之结合产生了许多视觉上以区块为主的网页设计作品。对于设计师而言,...

运用PS制作质感的3D立体字教程-淘宝美工教程

时间:2014-05-29 点击:3768

运用PS制作质感的3D立体字教程-淘宝美工教程...

20个创意LOGO设计【网页设计培训】

时间:2016-03-14 点击:1902

小编:LOGO是品牌视觉设计的灵魂。毋庸置疑,一个小小的图形,却需要经过千锤百炼,才得以成形。它不仅...

入门级小白攻略!如何用手机在旧楼房里拍出文艺范?

时间:2015-07-10 点击:1242

有人说,只有俗人才要去美景找景,豆瓣随便翻翻哪个摄影师不是在旧街道旧楼房破旧小场景来拍文艺范的 。...

更多设计教程>>


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