DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 特別的文字霓虹燈js效果
特別的文字霓虹燈js效果
編輯:關於JavaScript     

效果如下:
原文


代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>特別的文字霓虹燈js效果-</title>
</head>
<body>
<div><a href="http://" target="_blank"></a> <a href="http:///a/bjad/sj995xpd.htm" target="_blank">原文</a></div>
<div id="keleyi" style="font-size:40px;text-align:center"></div>
<script type="text/javascript">
var Tname = "歡迎您訪問網";
var Tlen = Tname.length;
var TKeleyi = new Array();

for (i = 0; i < Tlen; i++) {
TKeleyi.push(Tname.substring(i, i + 1));
}
var col = new Array("#FFCC00", "#3333FF", "#FF00cc", "#FF0000", "#00ff00", "#CC33FF");

var Kstart = 0;
function Dcolor() {

var Strname = "";
var j;
var ic = 0;
for (i = Kstart; i < Tlen + Kstart; i++) {
j = i;
if (j > Tlen - 1)
j = j - Tlen;
TKeleyi[j] = "<font color=" + col[ic] + ">" + Tname.substring(j, j + 1) + "</font>"
ic = ic + 1;
if (ic == col.length) ic = 0;
}
Kstart = Kstart + 1;
if (Kstart == Tlen) Kstart = 0;
for (i = 0; i < Tlen; i++) {
Strname = Strname + TKeleyi[i];
}
document.getElementById('kel'+'eyi').innerHTML = Strname;

setTimeout("Dcolor()", 600);
}
Dcolor();
</script>
</body>
</html>


使用:
在頁面的某處加入以下div代碼:
<div id="keleyi" style="font-size:40px;text-align:center"></div>

然後在後面加入腳本代碼(只需把文字改成你所需要的):
<script type="text/javascript">
var Tname = "歡迎您訪問網";
var Tlen = Tname.length;
var TKeleyi = new Array();

for (i = 0; i < Tlen; i++) {
TKeleyi.push(Tname.substring(i, i + 1));
}
var col = new Array("#FFCC00", "#3333FF", "#FF00cc", "#FF0000", "#00ff00", "#CC33FF");

var Kstart = 0;
function Dcolor() {

var Strname = "";
var j;
var ic = 0;
for (i = Kstart; i < Tlen + Kstart; i++) {
j = i;
if (j > Tlen - 1)
j = j - Tlen;
TKeleyi[j] = "<font color=" + col[ic] + ">" + Tname.substring(j, j + 1) + "</font>"
ic = ic + 1;
if (ic == col.length) ic = 0;
}
Kstart = Kstart + 1;
if (Kstart == Tlen) Kstart = 0;
for (i = 0; i < Tlen; i++) {
Strname = Strname + TKeleyi[i];
}
document.getElementById('kel'+'eyi').innerHTML = Strname;

setTimeout("Dcolor()", 600);
}
Dcolor();
</script>

當然你還可以修改顏色和間隔時間等。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved