我的js运动库新

//通过id获取当前元素//params:idfunction $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"; ???????} ???}}

//匀速运动//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);}

//缓冲运动（从快变慢）//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);}