js无缝滚动,不平滑(求高人指点)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <style> *{ margin:0; padding:0;} .container{ width:450px; height:150px; border:2px solid orange; overflow:hidden; margin:200px auto;} .container ul li{ width:400px; line-height:35px; margin-left:15px; border-bottom:1px dashed gray; list-style:none;} </style> </head> <body> <div class="container" id="container"> <div id="scroll1"> <ul> <li>1.韩国客机坠毁旧金山 乘客讲述被甩出客舱一瞬</li> <li>2.中领馆证实韩亚客机事故2名遇难者为中国公民</li> <li>3.中关村空间信息技术产业联盟</li> <li>4.韩国亚洲航空航班失事 伤亡情况暂时不详</li> <li>5.百度知道自动问答采纳软件 </li> <li>6.孩子学习不好怎么办</li> </ul> </div> <div id="scroll2"> </div> </div> </body> <script> function Fid(id) { return "string" == typeof id ? document.getElementById(id) : id;; } function Marquee() { Fid('scroll2').innerHTML = Fid('scroll1').innerHTML; var timer = 0; function _scroll() { timer = setInterval(function(){ if(Fid('container').scrollTop == Fid('scroll1').offsetHeight){ Fid('container').scrollTop = 0; } Fid('container').scrollTop ++; },20) } _scroll(); //移动到上面停止滚动 Fid('container').onmouseover = function(){ clearInterval(timer); } //移除继续滚动 Fid('container').onmouseout = function(){ _scroll(); } } Marquee(); </script> </html>
效果图: