js無縫滾動:javascript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding:0;} ul,li{list-style: none;} #main{ width:400px; height: 100px; border: 4px solid #ddd; background: #fff; margin: 0 auto; overflow: hidden; } #main h1{border-bottom: 4px solid #000;background: pink} #area{ overflow: hidden;height:100% } </style> </head> <body> <div id="main"> <h1>無縫滾動</h1> <div id="area"> <ul id="ul1"> <li>1.西遊記</li> <li>2.紅樓夢</li> <li>3.西廂記</li> <li>4.鹿鼎記</li> <li>5.石頭記</li> <li>6.水滸傳</li> </ul> <ul id="ul2"></ul> </div> </div> <script type="text/javascript"> var area=document.getElementById("area"); var ul1=document.getElementById("ul1"); var ul2=document.getElementById("ul2"); ul2.innerHTML=ul1.innerHTML;//克隆一個ul function scrollUp(){ if(area.scrollTop>=ul1.offsetHeight){ area.scrollTop=0; }else{ area.scrollTop++; } } var myScroll=setInterval("scrollUp()",50); area.onmouseover=function(){ clearInterval(myScroll); } area.onmouseout=function(){ myScroll=setInterval("scrollUp()",50); } </script> </body> </html>