js文字无缝滚动

今天要实现个文字滚动的效果，一开始试了<marquee></marquee>这个标签，但是发现效果不太好，不能无缝滚动，而且在手机上有卡顿不太流畅。决定用js去实现。

首先写个标签，注意下标签里面文字的长度要超出标签，因为我下面加了判断，如果没有超出就不会有滚动条，也就不会滚动哦~

<style>
#scrollobj{
    min-width: 70px;          /*先在这里写个最小宽度*/
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}
</style>

<body>
    <div id="scrollobj">这里是滚动内容纯文字哈哈哈，滚动吧</div>
</body>

在你的页面里调用这个方法就ok了。

function sc() {
    var $scrollobj = document.getElementById('scrollobj');
    function scroll(self) {
        /*往左*/
        var tmp = (self.scrollLeft)++;
        //当滚动条到达右边顶端时 
        if (self.scrollLeft == tmp) {
            self.innerHTML += "&nbsp;&nbsp;&nbsp;&nbsp;" + self.innerHTML;
        }
        //当滚动条滚动了初始内容的宽度时滚动条回到最左端 
        if (self.scrollLeft >= self.firstChild.offsetWidth) {
            self.scrollLeft = 0;
        }
    }

    if ($scrollobj.scrollWidth > $scrollobj.offsetWidth) {   // 判断是否需要滚动
        var timer = setInterval(function () {
            scroll($scrollobj);
        }, 30);
    }
}

来源：https://www.cnblogs.com/wteng/p/5729808.html

标签

滚动条

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!