无间断逐行滚动代码，一次一行的文字滚动

发布时间：2018-08-16 21:03 所属栏目：121 来源：站长网

导读：无间断逐行滚动代码，一次一行的文字滚动，小巧玲珑，小但精致，代码简洁，分享给大家，JS文字滚动也是挺常用的网页效果了，现在用不上，也可以先收藏起来呢。烈火学院小提示：代码中使用了 Java Script进行分词，以|分隔，童鞋们不妨研究一下。示例： h

　　无间断逐行滚动代码，一次一行的文字滚动，小巧玲珑，小但精致，代码简洁，分享给大家，JS文字滚动也是挺常用的网页效果了，现在用不上，也可以先收藏起来呢。

　　烈火学院小提示：代码中使用了JavaScript进行分词，以“|”分隔，童鞋们不妨研究一下。

　　示例：

<html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无间断滚动切换效果</title> <style type="text/css" media="all"> .scroll{ height:20px; overflow:hidden; font-size:12px; line-height:20px; border:#A5A5A5 1px dotted; width:120px; margin:0px auto; text-align:center; } </style> <script language="javascript" type="text/javascript"> var s,sn=0,timer,slen,timer2; function scrollInit(){ s=getid("s1"); s.scrollTop=0; slen=s.innerHTML.split("|"); s.innerHTML=""; for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");} s.innerHTML+=slen[0]; timer2=setInterval(scrollstart,3000); s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} } function scrollstart(){ if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} timer=setInterval(scrollexec,30); } function scrollexec(){ if(sn<20){ sn++; s.scrollTop++; }else{ sn=0; clearInterval(timer); } } function getid(id){return document.getElementById(id);} window.onload=scrollInit; </script> </head> <body> <div id="s1" class="scroll">北京|上海|广州|西安|烈火网|南京|大连|哈尔滨|武汉</div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）