js文字的无缝滚动（上下）

Posted 2020-12-26 Sarah119

使用scrolltop值的递增配合setInterval与setTimeout实现相关效果，左右无缝滚动使用scrollLeft即可

Dom内容

<div id="container">
            <ul id="con1">
                <li>javascript1</li>
                <li>javascript2</li>
                <li>javascript3</li>
                <li>javascript4</li>
                <li>javascript5</li>
                <li>javascript6</li>
                <li>javascript7</li>
            </ul>
        </div>

css内容

#container{width:400px;height:24px;margin:0 auto;border:1px solid red;overflow: hidden;}
            ul{list-style: none;padding:0;margin:0}
            ul li{height:24px;line-height: 24px;}

js相关内容

<script type="text/javascript">
        var c=document.getElementById("container");
        var con1=document.getElementById("con1");
        con1.innerhtml+=con1.innerHTML;  //把自身的内容变为原来的2倍
        // timer,t;
        var iHeight=24;
        var d=1000;
        var speed=50;
        function sTop(){
            if(c.scrollTop%iHeight==0){//如果卷去的距离能够除尽一行的高度
                clearInterval(timer);//把定时器清除  
                t=setTimeout(startMove,d);//延迟1s后继续触发定时器
            }
            if(c.scrollTop>=con1.scrollHeight/2){  //如果卷去的高度>=整个ul高度的一半时
                c.scrollTop=0;
                c.scrollTop=c.scrollTop-con1.scrollHeight/2; //让ul回到原点  即c.scrollTop=0
            }else{
                c.scrollTop++;  //如若不然，继续往上滚动
            }
        }
        function startMove(){
            c.scrollTop++;
            timer=setInterval(sTop,speed);
        }
        startMove();
        c.onmouseover=function(){
            clearInterval(timer);
            clearTimeout(t);
        }
        c.onmouseout=function(){
            timer=setInterval(sTop,speed);
        }
    </script>