js封装一个运动函数[move]（js工具库）

直接用js封装一个运动函数，使用时直接调用就行，比如做轮播图时就可以调用
/*
 * @ele：要进行运动的元素
 * @attr：要进行运动css属性
 * @target：运动的目标位置 
 * @cb：运动结束后，要执行的函数
*/
function sport(ele,obj,cb){
    let timerObj = {}; // 将所有定时器都放到这个对象中
    for(let attr in obj){ // 为了不让后面的定时器覆盖前面的，将var改为let
        let target = obj[attr]; // 为了多个属性不产生错误，将var改为let
        // 获取当前样式
        let currentStyle = window.getComputedStyle(ele)[attr]; // 为了能让多属性均匀，将var改为let
        // 当attr是透明度的时候，当前样式应该转为浮点数，并*100，因为传进来的目标是*100的
        if(attr == 'opacity'){
            currentStyle = parseFloat(currentStyle)*100;
            // 传进来的目标缩小了100倍，所以这里再扩大100倍
            target = target * 100;
        }else{
            // 获取到的是字符串，转为数字
            currentStyle = parseInt(currentStyle);
        }
        // 设置定时器，让当前样式每隔20毫秒增加5px
        // 通过每个css属性来识别这个定时器
        timerObj[attr] = setInterval(function(){ // 为了能将所有定时器都结束掉，将var改为let
            // 计算比例
            let percent = (target - currentStyle)/10;
            // 为了能让定时器停止，需要处理比例
            if(percent>0){
                percent = Math.ceil(percent); // 向右运动
            }else{
                percent = Math.floor(percent); // 向左运动
            }
            // 当前样式不能都加5，否则不均与，所以加上比例
            currentStyle += percent;
            // 判断增加后的样式是否到达指定距离
            if(currentStyle == target){ // 
                // 清除定时器
                clearInterval(timerObj[attr]);
                // 每次结束一个定时器将这个定时器从定时器对象中删掉
                delete timerObj[attr];
                // 每次删掉定时器后，遍历定时器对象，计算定时器对象中定时器的个数.
                let k=0;
                for(let i in timerObj){
                    k++;
                }
                // 如果个数是0，表示所有定时器都删掉了，也就意味着所有属性的运动都结束了
                if(k==0){
                    console.log("运动结束了");
                    // 当运动结束后想要做的事情，可以调用一个函数
                    cb(); // 这个函数需要当做参数传进来
                }
            }else{
                // 样式属性是透明度的时候，最后的值应该/100，并且不需要 px单位
                if(attr == 'opacity'){
                    box.style[attr] = currentStyle/100;
                }else{
                    // 将增加后的样式重新设置到元素上
                    box.style[attr] = currentStyle + 'px';
                }
            }
        },20);
    }
}

// 获取样式的函数
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}