代码描述:js文字垂直滚动。js实现的文字垂直滚动实例代码
文字垂直滚动效果应用非常的广泛,本章节就分享一下相关的代码实例。 下面代码含有两种效果,一种是具有暂停效果的滚动,另一个是没有暂停效果的滚动。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>文字无缝滚动实例代码</title> <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> <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); } window.onload=function() { startmarquee(25,30,3000,0); startmarquee(25,40,0,1); } </script> </head> <body> <div class="box" id="marqueebox0"> <ul> <li style="background:#f8e2ac;">51前端一</li> <li style="background:#f5f5f5;">51前端二</li> <li style="background:#ffe6ec;">51前端三</li> </ul> </div> <br> <div class="box" id="marqueebox1"> <ul> <li style="background:#f8e2ac;">51前端一</li> <li style="background:#f5f5f5;">51前端二</li> <li style="background:#ffe6ec;">51前端三</li> </ul> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能