运动模块最终封装

运动模块的最终版

 //封装getScroll函数
    //获取浏览器向上滚动的距离
    function getScroll(obj) {
        obj = {
            left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft,
            top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0
        };
        return obj;

    }
    //获取元素的样式属性
    function getStyle(ele,attr) {
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }else{
            return ele.currentStyle[attr];
        }
        
    }
    function animateHandle(ele,json,fn) {
        let current,target;
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            let flag = true;//设置一个标志位，假设全部到达目标
            
            for(let attr in json){
                if(attr === 'opacity'){
                    //获取当前元素的透明度
                    let current = getStyle(ele,attr)*100;
                    //目标的透明度放大100倍
                     target = json[attr]*100;
                    let step = (target-current)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    current += step;
                    ele.style[attr] = current/100;
                    
                    
                }else if(attr === 'zIndex'){
                    ele.style[attr] = json[attr];
                    
                }else{
                    //如果为普通属性
                     current = parseInt(getStyle(ele,attr));
                    //获取当前属性对应的目标值
                     target = json[attr];
                    let step = (target-current)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    current += step;
                    ele.style[attr] = current+'px';
                }
                //判断是否到达目标
                if(current!=target){ //未到达目标
                    flag = false; //不进行清理定时器
                }
            }
            if(flag){ //到达目标，进行清理
                clearInterval(ele.timer);
                if(fn){
                    fn();//调用回调函数
                }
            }
        })
        
    }
let btn1 = document.getElementById('btn1');
    let btn2 = document.getElementById('btn2');
    let dv = document.getElementById('dv');
    btn1.onclick = function () {
        animateHandle(dv,{left:400,top:500,opacity:"0.4"},function(){
            animateHandle(dv,{left:20,top:100,opacity:'0.9'})
        })
    }
    btn2.onclick = function () {
        animateHandle(dv,{left:800,top:600,opacity:"0.2"},function(){
            animateHandle(dv,{left:20,top:100,opacity:'0.9'})
        })
    }