js无缝滚动
标签：
JavaScript
js无缝滚动:
1 | <!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 点赞
0 评论
共同学习，写下你的评论
暂无评论
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦