文字淡入淡出

文章由 **yehlu** » 2006-07-20 15:32:29

http://kingmax.veeky.com/?p=123

文字淡入淡出效果的JavaScript

在网上找了很久，没有找到一段合适的可以同时在FIREFOX和IE下都兼容的ＪＳ能显示文字的淡入淡出功能．我其实是想要来做公告栏的。一气之下，将一段现成的在网上找到的加以改良，就成功了。

效果如该网站右上位置显示：http://www.00gg.net 代码如下。

先在head中或其它地方引用如下这段JS：

function init(){
var x=navigator.appVersion;
y=x.substring(0,4);
if(y>=4) Effect();
}
var colors=new Array
("FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","F9F9F9","F1F1F1","E9E9E9","E1E1E1","D9D9D9","D1D1D1","C9C9C9","C1C1C1","B9B9B9","B1B1B1","A9A9A9","A1A1A1","999999","919191","898989","818181","797979","717171","696969","616161","595959","515151","494949","414141","393939","313131","292929","212121","191919","111111","090909","000000");
a=0,b=1,l=0;

var texts=new Array("Hello","这就是你想要显示的文字了");

function Effect(){
color=colors[a];
text=texts[l];
aa="<font color="+color+">"+text+"</font>";
document.getElementById('flash_div').innerHTML=aa;
a+=b;
if (a==38) b-=2;
if (a==0) { b+=2;l++;}
if(l>=texts.length)l=0;
xx=setTimeout("Effect()",50);
}

好了，然后在body里加入：

<body onload="init()">

再在你想显示这段文字的地方加入这个DIV:

<div id="flash_div"></div>

是不是很简单？我都没想到这么简单，呵呵