我的js运动库新

1、一些样式的获取和设置

//通过id获取当前元素
//params:id
function $id(id) {
    return document.getElementById(id);
}
//向css一样获取元素
function $(selector) {
    return document.querySelector(selector);
}
//向css一样，获取一组元素
function $all(selector) {
    return document.querySelectorAll(selector);
}

//下边是有关运动的一些方法
//获取当前元素的样式值(兼容写法)
//param:obj(元素对象)，attr(属性)
function getStyle(obj,attr) {
    if (window.getComputedStyle) {
        if(attr == "opacity"){//如果是透明度，则返回100倍的数
            return parseFloat(window.getComputedStyle(obj,false)[attr])*100;
        }else if(attr == "zISndex"){
            return parseInt(window.getComputedStyle(obj,false)[attr]);
        }else{
            return parseFloat(window.getComputedStyle(obj,false)[attr]);
        }
    } else {//ie8及以下浏览器的兼容
        if(attr == "opacity"){//如果是透明度，则返回100倍的数
            return parseInt(obj.currentStyle["filter"]);
        }else if(attr == "zIndex"){
            return parseInt(obj.currentStyle[attr]);
        }else{
            return parseFloat(obj.currentStyle[attr]);
        }
    }
}
//设置属性值
function setStyle(obj,attr,index) {
    if (window.getComputedStyle) {
        if(attr == "opacity"){//如果是透明度，则返回100倍的数
           obj.style[attr] = index/100;
        }else if(attr == "zIndex"){
            obj.style[attr] = index;
        }else{
            obj.style[attr] = index + "px";
        }
    } else {//ie8及以下浏览器的兼容
        if(attr == "opacity"){//如果是透明度，则返回100倍的数
            // filter: alpha(opacity=20);
           obj.style["filter"] = "alpha(opacity=" + index + ")";
        }else if(attr == "zIndex"){
            obj.style[attr] = index;
        }else{
            obj.style[attr] = index + "px";
        }
    }
}

2、匀速运动

//匀速运动
//params:obj(运动的对象)，attr(变化的样式名称)，target(目标值)，speed(每次运动的距离)，time(运动间隔)
function linear(obj,attr,target,speed,time) {
    //取消其他该对象的定时器,避免重复点击从而开启多个定时器的bug
    clearInterval(obj.timer);
    //开启定时器，进行运动
    obj.timer = setInterval(function () {
        //获取当前元素的属性值，为数字类型
        var currentAttr = getStyle(obj,attr);
        //判断是否达到了目标值
        if (Math.abs(currentAttr - target)<Math.abs(speed)) {
            //这里设置的原因是可能不能达到目标值，我们需要手动设置
            setStyle(obj,attr,target);
            //关掉定时器
            clearInterval(obj.timer);
        } else {
            setStyle(obj,attr,currentAttr+speed);
        }
    },time);
}
//匀速运动
//params:obj(运动的对象)，attr(变化的样式名称)，target(目标值)，speed(每次运动的距离)，time(运动间隔)
function linear2(obj, attr, target, speed, time,callback) {
    //取消其他该对象的定时器,避免重复点击从而开启多个定时器的bug
    clearInterval(obj.timer);
    //开启定时器，进行运动
    obj.timer = setInterval(function () {
        //获取当前元素的属性值，为数字类型
        var currentAttr = getStyle(obj, attr);
        //判断是否达到了目标值
        if (Math.abs(currentAttr - target) < Math.abs(speed)) {
            //这里设置的原因是可能不能达到目标值，我们需要手动设置
            setStyle(obj, attr, target);
            //关掉定时器
            clearInterval(obj.timer);
            callback();
        } else {
            setStyle(obj, attr, currentAttr + speed);
        }
    }, time);
}

3、缓冲运动

//缓冲运动（从快变慢）
//params:obj(元素对象)，attr(属性)，target(最终目标)，time(时间间隔)
function slower(obj,attr,target,time) {
    clearInterval(obj.timer);
    //定义初始速度
    var speed = 0;
    obj.timer = setInterval(function () {
        //获取当前元素的属性值
       var currentAttr = getStyle(obj,attr);
       //计算当前速度（当前值与目标值差值的十分之一）
        speed = (target - currentAttr) / 10;
        //避免由于精度问题导致的不能达到目标值（取大数）
        speed = speed>0? Math.ceil(speed):Math.floor(speed);
        if (currentAttr == target) {
            clearInterval(obj.timer);
        } else {
            setStyle(obj,attr,speed+currentAttr);
        }
    },time);
}
//缓冲运动（从快变慢）添加一个对象的其他运动连续进行
//params:obj(元素对象)，attr(属性)，target(最终目标)，time(时间间隔),callback(回调函数)
function slower2(obj,attr,target,time,callback) {
    clearInterval(obj.timer);
    //定义初始速度
    var speed = 0;
    obj.timer = setInterval(function () {
        //获取当前元素的属性值
       var currentAttr = getStyle(obj,attr);
       //计算当前速度（当前值与目标值差值的十分之一）
        speed = (target - currentAttr) / 10;
        //避免由于精度问题导致的不能达到目标值（取大数）
        speed = speed>0? Math.ceil(speed):Math.floor(speed);
        if (currentAttr == target) {
            clearInterval(obj.timer);
             // 上一个动作完成 进入下一个动作
             if (callback) {
                callback();
            }
        } else {
            setStyle(obj,attr,speed+currentAttr);
        }
    },time);
}
//缓冲运动（从快变慢）添加一个对象的其他运动连续进行,添加一个对象同时的多个属性运动
//params:obj(元素对象)，json {attr:target}，time(时间间隔),callback(回调函数)
function slower3(obj,json,time,callback) {
    clearInterval(obj.timer);
    //定义初始速度
    var speed = 0;
    obj.timer = setInterval(function () {
        //循环所有传入的属性
        for (var attr in json) {
          //获取当前元素的属性值
            var currentAttr = getStyle(obj,attr);
            console.log(currentAttr);

            //计算当前速度（当前值与目标值差值的十分之一）
                speed = (json[attr] - currentAttr) / 10;
                //避免由于精度问题导致的不能达到目标值（取大数）
                speed = speed>0? Math.ceil(speed):Math.floor(speed);
                if (currentAttr == json[attr]) {
                    clearInterval(obj.timer);
                    // 上一个动作完成 进入下一个动作
                    if (callback) {
                        callback();
                    }
                } else {
                    setStyle(obj,attr,speed+currentAttr);
                }
        }

    },time);
}

原文地址：https://www.cnblogs.com/dhrwawa/p/10468796.html