js無縫滾動
標簽：
JavaScript
js无缝滚动:
<!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>
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦