JS实现文字无缝滚动

来源：互联网发布：琴国乐器淘宝店编辑：程序博客网时间：2024/06/09 20:22
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>js实现文字无缝滚动</title>    <style>        div,ul{margin: 0;padding: 0}        ul,li{list-style: none}        #list{width: 300px;height: 200px;margin:0 auto;overflow: hidden;}        li{width:150px;padding: 5px;border-bottom: 1px solid #dedede;text-align: center}    </style></head><body> <div id="list">     <ul id="list1">         <li>我是第一条</li>         <li>我是第二条</li>         <li>我是第三条</li>         <li>我是第四条</li>         <li>我是第五条</li>         <li>我是第六条</li>         <li>我是第七条</li>         <li>我是第八条</li>         <li>我是第九条</li>         <li>我是第十条</li>         <li>我是第十一条</li>         <li>我是第十二条</li>         <li>我是第十三条</li>         <li>我是第十四条</li>     </ul>     <ul id="list2"></ul> </div> <script src="js/jquery-1.11.3.js"></script> <script>     $(function(){         var list = document.getElementById("list");         var list1 = document.getElementById("list1");         var list2 = document.getElementById("list2");         list2.innerHTML = list1.innerHTML;         function Marquee() {             if (list2.offsetTop-list.scrollTop <= 0){                 list.scrollTop -= list1.offsetHeight;             }             else {                 list.scrollTop++             }         }         var MyMar=setInterval(Marquee,50);         list.onmouseover=function() {clearInterval(MyMar)};         list.onmouseout=function() {MyMar=setInterval(Marquee,50)}     }); </script></body></html>
1 0