这是上一篇的js部分,只是单独总结出来一个工具类,以后用了方便罢了
https://blog.csdn.net/wuxiao18/article/details/97616476
/*
* 目前定时器的标识在全局中保存
* 所有的执行正在执行的定时器都在这保存
* *///var timer;
//更改为了obj.timer
//创建可以实现简单动画的函数
/*
* 参数:obj;移动对象
* attr:要执行动画的样式,比如:left,top,width
* target:目标位置
* speed:速度
* callback:回调函数,在动画执行完毕后执行
*/
function move(obj,attr,target,speed,callback){
//避免 同一元素开启多个定时器
clearInterval(obj.timer);
//获取目标目前的位置
var current = parseInt(getstyle(obj,attr),10);
//判断速度的正负
//如果0-800,speed为正
//如果800-0,speed为负
if(current > target){
speed = -speed;
}
//开启一个定时器
//获取元素样式并去掉px;
obj.timer = setInterval(function(){
//获取box1原来的left
var oldValue = parseInt(getstyle(obj,attr),10);
//在旧值的基础上加10
var newValue=oldValue+speed;
//如果不是以10依次变化的话也就是变化的值不是停止值的整数因数,会导致不会停止
//所以要加个判断
//向左移动时,判断newValue是否小于target
//向右移动时,判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
newValue=target;
}
//更改值
obj.style[attr] = newValue +"px";
//关闭定时器
if(newValue === target){
clearInterval(obj.timer);
//动画执行完毕,有回调函数就执行回调函数
callback && callback();
}
},10);
};
//获取元素样式函数
function getstyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
};