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

其它免费教程

实战干货!怎样快速完成APPLE WATCH设计项目

时间:2015-12-04 点击:1256

小编:设计师如何应对突发情况?如果给你一个没有接触过的项目,让你一两周之内设计完成,这个时候作为一名...

职场答疑:30岁的设计师注定缺乏招聘优势吗?

时间:2016-05-09 点击:1051

小编:昨天聊到公司招聘的问题,但是没想到很多朋友考虑的点却是,30岁是一个就职没有优势的年龄吗?对于...

逆风求变!聊聊经典大牌改版后的LOGO设计!

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

这篇文章集结了今年1月以来各个大牌LOGO的改版前后进化史,从希拉里到Facebook、从Youtu...

学习html5能做什么,为什么我们要学习HTML5?【HTML5培训】

时间:2015-03-04 点击:10140

好吧,下面我会告诉你为什么懂点HTML和CSS会让你的职业生涯发生巨大的改变。学习技术不仅仅是生产助...

腾讯游戏H5:设计师分享H5实战案例经验

时间:2015-10-24 点击:4122

小编:今天带来超实用的​腾讯游戏HTML5实战案例,腾讯设计师分享了在广告设计和投放的过程中的经验和...

更多设计教程>>


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