楼梯滚动联动

1

2

3

4

<script>
    var isTop = true;
    var aCenterLi = document.getElementsByTagName("button");  //使用时记得修改所选范围
    //运动框架
    function startMove(obj, json, times, endfn) {

        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var iFlag = true;//假设所有运动都到达目标
            for (var attr in json) {

                //1.取当前值
                var icur = 0;
                attr == 'opacity' ? icur = Math.round(parseFloat(getStyle(obj, attr)) * 100) : icur = Math.round(getStyle(obj, attr).replace("px", ""));
                //2.计算速度
                var speed = (json[attr] - icur) / times;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                //3.检测停止
                if (icur - json[attr] > 1 || icur - json[attr] < -1) {
                    iFlag = false;
                }
                if (attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity:' + icur + speed + ')';
                    obj.style.opacity = (icur + speed) / 400;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
            if (iFlag) {
                clearInterval(obj.timer);
                endfn && endfn.apply(obj);
            }
        }, 30)

    }
    function getStyle(obj, attr) { return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; }
    //滚动条运动
    function movescroll(obj, y) {
        for (let l = 0; l < aCenterLi.length; l++) {
            clearInterval(aCenterLi[l].timer5);  //清除上一个效果
        }
        obj.timer5 = setInterval(function () {
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            var speed2 = (y - osTop) / 4;   //计算速度
            speed2 = speed2 > 0 ? Math.ceil(speed2) : Math.floor(speed2);
            document.documentElement.scrollTop = osTop + speed2;
            isTop = true;
            if (speed2 == 0) {
                for (let l = 0; l < aCenterLi.length; l++) {
                    clearInterval(aCenterLi[l].timer5);    //结束后关闭定时器
                }
            }
        }, 30);
    }
    window.onscroll = function () {
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (!isTop) {
            for (let l = 0; l < aCenterLi.length; l++) {
                clearInterval(aCenterLi[l].timer5);    //移动滚动条则停止之前运动，避免bug
            }
        }
        isTop = false;
    }
    for (let l = 0; l < aCenterLi.length; l++) {
        aCenterLi[l].onmouseover = function () {
            movescroll(aCenterLi[l], (l * 900))   //规定移动到的距离
        }
    }

</script>