JS+CSS实现两行文字从左到右渐显特效
程序员文章站
2022-06-08 19:26:51
...
通常,文字渐显特效都是用图或者flash来做。这里懒得去找UI,火速自己写吧,有个背景图就照,文字特效听我的。
开始--->
背景:1)两行文字,从左到右,渐显;2)第一行文字:欢迎登录;第二行文字:我是第二行HOHO
------------------背景介绍完毕-------------
1.body里放2个DIV
2、JS控制实现特效
<---结束
结束语:自己玩玩,虽然多数时候在搞后台,发现前台也蛮有意思的~~
开始--->
背景: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>
<---结束
结束语:自己玩玩,虽然多数时候在搞后台,发现前台也蛮有意思的~~