JavaScript 实现上下循环滚动

实现一个图片或者div在屏幕的上下间循环滚动

实现原理：通过获取当前位置距离页面浏览器可见区域的距离来执行往上还是往下的操作。

实现步骤

1、获取当前浏览器的可见区域的高度

var vh=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
function $(id) {
   return typeof id == "string"?document.getElementById(id):id;
}
var move1 = $('ido_move1');

2、因为div 元素的高度是200px，所以判断是够到底层的时候，距离页面上面的距离应该是vh - 200。

 function GoUp1(){
    function moveUp1() {
        var bot = move1.style.marginTop ? move1.style.marginTop : (vh - 200);
        bot = parseInt(bot) - 1;
        move1.style.marginTop = bot + "px";
        if(bot == 0){
            clearInterval(tempUp1);
            GoDown1();
        }
    }
    var tempUp1 = setInterval(moveUp1,25);
}

function GoDown1() {
    function moveDown1() {
        var top = move1.style.marginTop ? move1.style.marginTop : 0;
        top = parseInt(top) + 1;
        move1.style.marginTop = top + "px";
        if(top == (vh - 200)){
            clearInterval(tempDown1);
            GoUp1();
        }
    }
    var tempDown1 = setInterval(moveDown1,25);
}

利用setInterval()方法的特性，setInterval ()方法一般用作动画循环或者时间计时器等场景。因为setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。而且setInterval（）方法会不停地调用函数，知道调用clearInterval()清除或关闭定时器，才停止执行。