欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-08 19:26:51
...
通常,文字渐显特效都是用图或者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>


<---结束

结束语:自己玩玩,虽然多数时候在搞后台,发现前台也蛮有意思的~~
相关标签: ui javascript