js实现文字列表无缝向上滚动

作者: MiSiTeWang | 来源:发表于2019-08-16 17:58 被阅读0次

js实现文字列表无缝向上滚动
js实现-新闻间歇性向上无缝滚动
原生js之列表优化-无限滚动实例
JS实现文字无缝滚动
无缝向上、向左滚动--间歇性滚动
文字无缝向上滚动
JS实现无缝滚动
JS实现无缝滚动
js 无缝滚动实现
JS实现无缝滚动

        body{font-size:12px}
        #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative;}
        #demo1{height:auto; text-align:left;}
        #demo2{height:auto; text-align:left;}
        #demo1 li, #demo2 li{list-style-type:none; height:22px; text-align:left; }

<body>
<div id="demo">
    <ul id="demo1">
        <li><a href="#" target="_blank">脚本之家欢迎您的到来</a></li>
        <li><a href="#" target="_blank">只有努力才会有美好的明天</a></li>
        <li><a href="#" target="_blank">没有人一开始就是高手，都是从菜鸟开始</a></li>
        <li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li>
        <li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li>
        <li><a href="#" target="_blank">今天你写代码了吗</a></li>
        <li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li>
    </ul>
    <div id="demo2"></div>
</div>
</body>

<script type="text/javascript">
        var speed = 40;
        window.onload=function(){
            var demo=document.getElementById("demo");
            var demo2=document.getElementById("demo2");
            var demo1=document.getElementById("demo1");
            demo2.innerHTML = demo1.innerHTML;
            function Marquee(){if(demo.scrollTop>=demo1.offsetHeight){
                    demo.scrollTop=0;
                }
                else{
                    demo.scrollTop=demo.scrollTop+1;
                }
            }
            var MyMar=setInterval(Marquee,speed);
            demo.onmouseover=function(){clearInterval(MyMar)};
            demo.onmouseout=function(){MyMar=setInterval(Marquee,speed); };

        }
    </script>