JS+CSS实现两行文字从左到右渐显特效

dingherry

通常，文字渐显特效都是用图或者flash来做。这里懒得去找UI，火速自己写吧，有个背景图就照，文字特效听我的。

开始--->

背景：1）两行文字，从左到右，渐显；2）第一行文字：欢迎登录；第二行文字：我是第二行HOHO
------------------背景介绍完毕-------------

1.body里放2个DIV
<div id="textface" style='font-size:48px;color:#FFFFFF;float:left;margin-top:170;margin-left:250'></div><div id="textfacebom" style='font-size:48px;color:#FFFFFF;float:left;margin-top:218;margin-left:0'></div>

2、JS控制实现特效
<script language="JavaScript">        var interval = 120;//打印间隔（毫秒）        var msg = "欢迎登录             " ;//第一行的文字，注意：这一行的文字后面的空格数是第二行的总长度var seq=0,len = msg.length;var msg2 = "我是第二行HOHO    ";//第一行的文字，注意：后面的空格其实是让人看着文字悬停了一会，多一个空格就多悬停intervalvar seq2=0,len2 = msg2.length;function textScroll2() {try{document.getElementById("textfacebom").innerHTML = msg2.substring(0, seq2+1);}catch(e){}seq2++;if ( seq2 >= len2 ) { seq2 = 0; document.getElementById("textfacebom").innerHTML = '';return;}window.setTimeout("textScroll2();", interval );}function textScroll() {try{document.getElementById("textface").innerHTML = msg.substring(0, seq+1);window.status = msg.substring(0, seq+1);//左下角显示}catch(e){}seq++;if(seq == 5){textScroll2();}if ( seq >= len ) { seq = 0; document.getElementById("textface").innerHTML = '';document.getElementById("textfacebom").innerHTML = '';window.setTimeout("textScroll();", interval );}elsewindow.setTimeout("textScroll();", interval );}textScroll();</script>

<---结束

结束语：自己玩玩，虽然多数时候在搞后台，发现前台也蛮有意思的~~