JS实现文字无缝滚动

最新推荐文章于 2024-01-23 18:00:00 发布

ljstyle

最新推荐文章于 2024-01-23 18:00:00 发布

阅读量610

点赞数 1

分类专栏： js 文章标签： javascript jquery

本文链接：https://blog.csdn.net/ljstyle/article/details/71520201

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>

ljstyle

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS实现文字无缝滚动

<!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
复制链接

扫一扫