javascript 图片垂直向上无缝滚动效果解析

如何使用javascript制作图片的无缝滚动效果呢？首先我说一下思路,这里我定义2个div容器，一个是demo1,一个是demo2, 我的目标是demo1从最初点开始向上匀速滚动，当滚动到demo1的最后一张图片的时候，使用偏移距离，让demo1重新开始滚动， 这样便达成了无缝滚动效果，那么有一个问题就是demo1向上滚动的时候demo1滚动剩余的高度小于整个滚动效果宽度的时候，这样下面便出现了空白距离。 会很难看自然达不到无缝滚动的效果。那么怎么办呢，所以我定义了一个demo2, 我们把节点demo1中的html内容复制一份到节点demo2中，当demo1向上滚动的剩余高度小于整个滚动效果高度的时候让demo2紧紧跟着demo1向上滚动， 当demo1滚动完以后，立刻让demo1重新滚动 这样便达到了图片无缝滚动效果

关键技术点

• 计时器调用滚动的方法，达到匀速滚动效果

• 节点demo1中的html内容复制到节点demo2中

• javascript对demo1与demo2交界位置的判断

• overflow:hidden 对溢出部分的隐藏，隐藏超出部分的内容，防止其显示在容器之外。

• 鼠标移入移出对效果的影响

关键代码与说明

<script>
    //上下无缝滚动效果
    var speeds = 40; //数字越大速度越慢
    var demos = document.getElementById("demos"); //根据id获取元素
    var demos1 = document.getElementById("demos1"); //根据id获取元素
    var demos2 = document.getElementById("demos2"); //根据id获取元素
    demos2.innerHTML = demos1.innerHTML; //把节点demos1中的html内容复制一份到节点demos2中
    function Marquees() {
        ///当滚动至demo1与demo2交界时
        if (demos2.offsetTop - demos.scrollTop <= 0)
        //偏移距离，demos1返回到初始位置
            demos.scrollTop -= demos1.offsetHeight
        else {
            //继续做滚动
            demos.scrollTop++
        }
    }
    //定义计时器每40毫秒调用Marquee一次
    var MyMars = setInterval(Marquees, speeds)
    //鼠标移上时清除定时器达到滚动停止的目的
    demos.onmouseover = function () { clearInterval(MyMars) }
    //鼠标移开时重设定时器
    demos.onmouseout = function () { MyMars = setInterval(Marquees, speeds) }
</script>