Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了。
查看效果:http://keleyi.com/a/bjad/bd55blos.htm
以下是源代码:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>滚动变色的文字js特效-柯乐义</title> 5 </head> 6 <body> 7 <div style="width:736px;"> 8 请注意下方的文字,部分文字染成红色,且红色循环移动。 <a href="http://keleyi.com/a/bjad/bd55blos.htm" target="_blank">原文</a> 9 </div> 10 <script type="text/javascript"> 11 var message="欢迎访问柯乐义网,这里有web前端等学习资料。" 12 var neonbasecolor="#333333" 13 var neontextcolor="#ff0000" 14 var neontextcolor2 = "#ff3333" 15 var flashspeed=100 16 var flashingletters=8 17 var flashingletters2=2 18 var flashpause=0 19 var n=0 20 if (document.all||document.getElementById){ 21 document.write(‘<font color="‘+neonbasecolor+‘">‘) 22 for (m=0;m<message.length;m++) 23 document.write(‘<span id="neonlight‘+m+‘">‘+message.charAt(m)+‘</span>‘) 24 document.write(‘</font>‘) 25 } 26 else 27 document.write(message) 28 function crossref(number){ 29 var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) 30 return crossobj 31 } 32 function neon(){ 33 if (n==0){ 34 for (m=0;m<message.length;m++) 35 crossref(m).style.color=neonbasecolor 36 } 37 crossref(n).style.color=neontextcolor 38 if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 39 if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor 40 if (n<message.length-1) 41 n++ 42 else{ 43 n=0 44 clearInterval(flashing) 45 setTimeout("beginneon()",flashpause) 46 return 47 } 48 } 49 function beginneon(){ 50 if (document.all||document.getElementById) 51 flashing=setInterval("neon()",flashspeed) 52 } 53 beginneon() 54 </script> 55 56 <div><br /><a href="http://keleyi.com" target="_blank">keleyi.com</a></div> 57 </body> 58 </html>