JS文本滚动特效,间断和不间断两种

发布时间：2018-08-23 16:35:39 所属栏目：PHP教程来源：站长网

导读：JS文本滚动特效,间断和不间断两种， Java script配合CSS简单实现，有间断和不间断两种，文本滚动代码，文字在一行高度范围内不间断滚动，还有一个是间断滚动，滚动一次后会稍停片刻再次滚动。代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Tran

　　JS文本滚动特效,间断和不间断两种，Javascript配合CSS简单实现，有间断和不间断两种，文本滚动代码，文字在一行高度范围内不间断滚动，还有一个是间断滚动，滚动一次后会稍停片刻再次滚动。

　　代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Js+CSS间断和不间断文本滚动代码</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .box{width:150px;height:25px;line-height:25px;border:#bbb 1px solid;overflow:hidden;} .box ul{margin:0;padding:0} .box li{height:25px;line-height:25px;font-size:12px;text-align:center;list-style-type:none;} </style> </head> <body> <div class="box" id="marqueebox0"> <ul> <li style="background:#f8e2ac;">第一行</li> <li style="background:#f5f5f5;">第二行</li> <li style="background:#ffe6ec;">第三行</li> </ul> </div><br> <div class="box" id="marqueebox1"> <ul> <li style="background:#f8e2ac;">第一行</li> <li style="background:#f5f5f5;">第二行</li> <li style="background:#ffe6ec;">第三行</li> </ul> </div> <script type="text/javascript"> function startmarquee(lh,speed,delay,index){ var t; var p=false; var o=document.getElementById("marqueebox"+index); o.innerHTML+=o.innerHTML; o.onmouseover=function(){p=true} o.onmouseout=function(){p=false} o.scrollTop = 0; function start(){ t=setInterval(scrolling,speed); if(!p){ o.scrollTop += 1;} } function scrolling(){ if(o.scrollTop%lh!=0){ o.scrollTop += 1; if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } startmarquee(25,30,3000,0); startmarquee(25,40,0,1); </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

揭晓学好java开发的关	用php怎样实现数字转化
PHP导出数据超时怎么办	浅谈Laravel参数验证的