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

通常，文字渐显特效都是用图或者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    ";//第一行的文字，注意：后面的空格其实是让人看着文字悬停了一会，多一个空格就多悬停interval
		var 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 );
			}
			else
				window.setTimeout("textScroll();", interval );
		}
		textScroll();
		</script>

<---结束

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