<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>無(wú)縫滾動(dòng)</title>????
????<style?type="text/css">
*{margin:0;padding:0;}
#odiv{width:300px;border:1px?solid?#000;background:#d8bfd8;}
h3{height:50px;line-height:50px;text-align:?center;border:1px?solid?#000;color:white;}
#div1{overflow:?hidden;?height:150px;border:1px?solid?#000;}
ul{width:200px;margin:0?50px?0?50px;}
li{list-style:?none;}
a{text-decoration:?none;color:white;}
????</style>
????
</head>
<body>
<script?type="text/javascript">
??window.onload=function(){
??????var?area=document.getElementById('div1');
??????var?con1=document.getElementById('con1');
??????var?con2=document.getElementById('con2');
??????var?speed=50;
???????area.scrollTop=0;
???con2.innerHTML=con1.innerHTML;
???function?scroll(){
???if(area.scrollTop>=con1.offsetHeight)
??????????{
??????????area.scrollTop=0;
??????}
??????else{
??????????area.scrollTop++;
??????}
??}
?var?myscorll=setInterval(scroll,speed);
?area.onmouseover?=function(){
?????clearInterval(myscorll);
?}
?area.onmouseout?=function(){
?????setInterval(scroll,speed);
?}
??}
????</script>
????<div?id="odiv">
????<h3>亞洲新歌榜實(shí)時(shí)趨勢(shì)</h3>
????<div?id="div1">
????<ul?id="con1">
????????<li><a?href="#"?>1.玫瑰與小鹿----周深</a></li><br>
????????<li><a?href="#"?>2.蜉蝣----華晨宇</a></li><br>
????????<li><a?href="#"?>3.大夢(mèng)想家----TFBOYS</a></li><br>
????????<li><a?href="#"?>4.Rims----歐豪</a></li><br>
????????<li><a?href="#"?>5.銀河----汪蘇瀧</a></li><br>
????????<li><a?href="#"?>6.創(chuàng)作者----本兮</a></li><br>
????????<li><a?href="#"?>7.做你的Gentleman----張陽(yáng)陽(yáng)</a></li><br>
????????<li><a?href="#"?>7.做你的Gentleman----張陽(yáng)陽(yáng)</a></li><br>
????????<li><a?href="#"?>7.做你的Gentleman----張陽(yáng)陽(yáng)</a></li><br>
????????<li><a?href="#"?>7.做你的Gentleman----張陽(yáng)陽(yáng)</a></li><br>
????????<li><a?href="#"?>7.做你的Gentleman----張陽(yáng)陽(yáng)</a></li><br>
????????</ul>
????????<ul?id="con2"></ul>
????</div>
????</div>
</body>
</html>
2016-02-06
2015-09-26
不是有個(gè)清除的效果的嘛
2015-09-18
我知道為什么了，，再一次設(shè)置定時(shí)器的時(shí)候要返回值給myscroll，不然就每次鼠標(biāo)移動(dòng)的時(shí)候都消除不了上次的定時(shí)器，但是每次移出的時(shí)候都會(huì)再設(shè)置一個(gè)定時(shí)器，而這個(gè)定時(shí)器沒(méi)有被消掉，導(dǎo)致scrollTop加速，應(yīng)該就醬。
2015-09-18
我也遇到這種問(wèn)題了，請(qǐng)問(wèn)怎么解決呢？
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>實(shí)現(xiàn)無(wú)縫滾動(dòng)</title> </head> <style?type="text/css"> *{ margin:0px; padding:0px; } #mookBox{ width:?300px; height:?50px; background:#CF6; overflow:hidden; } </style> <body> <div?id='mookBox'> <div?id='div1'> <p> <a?href="#">hello!小伙伴</a><br> <a?href="#">新案例出爐</a><br> <a?href="#">一個(gè)學(xué)習(xí)型網(wǎng)站</a><br> <a?href="#">如果有建議請(qǐng)?zhí)峤唤o我們</a><br> <a?href="#">非常感謝大家經(jīng)常光顧</a><br> </p> </div> <div?id='div2'> </div> </div> <script?type="text/javascript"> var?area?=?document.getElementById('mookBox'); //alert(area.onscroll); var?oDiv1?=?document.getElementById('div1'); var?oDiv2?=?document.getElementById('div2'); oDiv2.innerHTML?=?oDiv1.innerHTML; function?scrollUp?()?{ if(area.scrollTop>=oDiv1.offsetHeight){ area.scrollTop?=?0; }else{ area.scrollTop++; } } var?time?=?50; var?myScroll?=?setInterval(scrollUp,time); area.onmouseover?=?function(){ clearInterval(myScroll); }; area.onmouseout?=?function(){ setInterval(scrollUp,time); }; </script> </body> </html>