當前位置:軟件學堂 > 資訊首頁 > 網(wǎng)絡編程 > 編程其他 > JS代碼實現(xiàn)文字逐個閃亮(霓虹燈效果)

JS代碼實現(xiàn)文字逐個閃亮(霓虹燈效果)

2012/10/21 10:07:10作者:佚名來源:網(wǎng)絡

移動端

【實例名稱】

JS代碼實現(xiàn)文字逐個閃亮(霓虹燈效果)

【實例描述】

常見的霓虹燈效果,是通過文字逐個循環(huán)顯示實現(xiàn)。本例通過文本的顏色變換,實現(xiàn)文字的霓虹燈效果。

【實例代碼】

   

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>標題頁</title> <script language="JavaScript"> text = "歡迎光臨我們的俱樂部";   //顯示的文字 color1 = "gray";                 //文字的顏色 color2 = "blue";                  //轉換的顏色 fontsize = "6";                  //字體大小 speed = 100;                     //轉換速度 (毫秒) i = 0; if (navigator.appName == "Netscape") {//瀏覽器不同,輸出的標簽不同     document.write("<layer id=myDiv visibility=show></layer><br><br><br>"); } else {     document.write("<div id=myDiv></div>"); } function changeCharColor() {     if (navigator.appName == "Netscape") {          //Netscape瀏覽器的情況下         document.myDiv.document.write("<center><font face=arial size =" + fontsize + "><font color=" + color1 + ">");         for (var j = 0; j < text.length; j++) {         if(j == i) {             document.myDiv.document.write("<font face=arial color=" + color2 + ">" + Text.charAt(i) + "</font>");              }             else {             document.myDiv.document.write(text.charAt(j));             }         }         document.myDiv.document.write('</font></font></center>');         document.myDiv.document.close();     }     if (navigator.appName == "Microsoft Internet Explorer") //IE瀏覽器的情況下     {         str = "<center><font face=arial size=" + fontsize + "><font color=" + color1 + ">";         for (var j = 0; j < text.length; j++) {         //循環(huán)輸出指定字體大小和顏色的文本             if( j == i) {             str += "<font face=arial color=" + color2 + ">" + text.charAt(i) + "</font>";             }             else {             str += text.charAt(j);             }         }         str += "</font></font></center>";         myDiv.innerHTML = str;                          //在div中顯示文本     }     (i == text.length) ? i=0 : i++;                 //如果i的值不大于文本的長度,則自增 } setInterval("changeCharColor()", speed);             //通過定時器,實現(xiàn)不斷的循環(huán) </script> </head> <body> </body> </html>

 

【運行效果】

運行效果

【難點剖析】

本例的重點是霓虹燈效果的原理,霓虹燈就是逐個點亮一段文字。本例中通過循環(huán)獲取當前要點亮的字符,然后跟據(jù)指定的顏色和字體大小,設置此字符的樣式,本例中用顏色變化代表點亮某個字符。修改后的文本再用div動態(tài)輸出,以實現(xiàn)文本的動態(tài)改變效果。

【源碼下載】

本實例JS代碼下載

標簽: 文字  JS代碼