纯js实现文字无缝滚动(亲测有效)

1、//html代码
<div class="scroll" id="scroll">
    <div id="scroll2">
        <ol id="data">
            //data从接口读取数据
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
        </ol>
    </div>
</div>

2、//css控制整体高度
#scroll{width: 300px;height: 126px;overflow: hidden;}

3、//js代码
var myMarquee = '';  //设置定时器
function listScroll(){
    //文字滚动
    var scroll = document.getElementById("scroll");
    var scroll2 = document.getElementById("scroll2");
    //创建用于复制scroll2的新节点
    var newnode = document.createElement("div");
    newnode.id = "scroll3";
    scroll.appendChild(newnode);
    var scroll3 = document.getElementById("scroll3");
    var speed = 30;    //设置速度
    scroll3.innerHTML = scroll2.innerHTML;  //复制scroll2节点
    // 滚动函数
    function moveTop() {
        // 当main向上滚动超出部分>=滚动节点高度时, 设置为scrollTop为0
        if (scroll2.offsetHeight - scroll.scrollTop <= 0 ) {
            scroll.scrollTop = 0;
            // 或者main.scrollTop -= scroll2.offsetHeight;
        } else {
            scroll.scrollTop++;
        }
    }
    myMarquee = setInterval(moveTop, speed);  //设置定时器
    // 鼠标悬停时清除定时器停止滚动，移出后继续滚动
    scroll.onmouseover = function() {
        clearInterval(myMarquee);
    }
    scroll.onmouseout = function() {
          myMarquee = setInterval(moveTop, speed);
    }
    window.onresize = function(){
        console.log(document.body.clientHeight)
    }
}
listScroll()

//注意如果数据是要实时刷新的，需要添加clearInterval(myMarquee)清掉

自定义属性data-* 不兼容ie6/7/8/9/10解决方法

vuejs鼠标拖着改变div宽度大小

如何利用css怎么隐藏scroll滚动条

数组相关运用

织梦dedecms用栏目交叉时arclist标签不能调出相关文

标签： data-*, div拖拽, id, scroll, 读取数据

上面是“纯js实现文字无缝滚动(亲测有效)”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_54.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！