实例名称

JS代码实现文字逐个闪亮霓虹灯效果

实例描述

常见的霓虹灯效果，是通过文字逐个循环显示实现。本例通过文本的颜色变换，实现文字的霓虹灯效果。

实例代码

html xmlns="" headtitle标题页/titlescript language="JavaScript"text = "欢迎光临我们的俱乐部"; //显示的文字color1 = "gray"; //文字的颜色color2 = "blue"; //转换的颜色fontsize = "6"; //字体大小speed = 100; //转换速度 毫秒 i = 0;if == "Netscape" //浏览器不同，输出的标签不同 "layer id=myDiv visibility=show/layerbrbrbr";else "div id=myDiv/div";function changeCharColor if == "Netscape" //Netscape浏览器的情况下 "centerfont face=arial size =" + fontsize + "font color=" + color1 + ""; for var j = 0; j ; j++ ifj == i "font face=arial color=" + color2 + "" + + "/font"; else ; '/font/font/center'; ; if == "Microsoft Internet Explorer" //IE浏览器的情况下 str = "centerfont face=arial size=" + fontsize + "font color=" + color1 + ""; for var j = 0; j ; j++ //循环输出指定字体大小和颜色的文本 if j == i str += "font face=arial color=" + color2 + "" + + "/font"; else str += ; str += "/font/font/center"; = str; //在div中显示文本 i == ? i=0 : i++; //如果i的值不大于文本的长度，则自增setInterval"changeCharColor"， speed; //通过定时器，实现不断的循环/script/headbody/body/html

运行效果

难点剖析

本例的重点是霓虹灯效果的原理，霓虹灯就是逐个点亮一段文字。本例中通过循环获取当前要点亮的字符，然后跟据指定的颜色和字体大小，设置此字符的样式，本例中用颜色变化代表点亮某个字符。修改后的文本再用div动态输出，以实现文本的动态改变效果。

源码下载