js循环滚动

2019独角兽企业重金招聘Python工程师标准>>>

//这是dom结构

<div id="demo"><div id="demo1">这里是你要添加的数据(有浮动记得清楚浮动，不然没高度)</div><div id="demo2"></div></div>

//代码网上可以搜到，原理是创建一个demo2 的div就，把demo1 的内容复制到demo2的里面。定时器来增加demo的滚动高度。当滚动到最底下时让demo的滚动高度重新赋值。判断demo2距离父级顶部的高度与demo的滚动高度差值（不循环滚动重新计算）；

<script>

// 判断当前数据是否超过显示区域，超过则滚动，否则不滚动
    var flag = true;
    if(demo1.offsetHeight <= demo.offsetHeight) {
        flag = false;
    } else {
        flag = true;
    }
    if(flag) {
        var speed = 10   //滚动速度，越小越快
        var cliH = demo1.offsetHeight
        demo2.innerHTML = demo1.innerHTML
        var num = demo2.offsetTop - cliH;   //  这个原本是想实现上面的判断，但是有bug。只有一条数据时会显示两条。作用是用来计算demo2的距离顶部的高度与demo的滚动高度的差，用于下面的判断。
        function Marquee() {
            if(demo2.offsetTop - demo.scrollTop <= num)
                demo.scrollTop -= demo1.offsetHeight
            else {
                demo.scrollTop++
            }
        }
        var MyMar = setInterval(Marquee, speed)
        demo.onmouseover = function() {
            clearInterval(MyMar)
        }
        demo.onmouseout = function() {
            MyMar = setInterval(Marquee, speed)
        }
    }
</script>

转载于:https://my.oschina.net/u/2879089/blog/1548837