/*
*参数
*obj:要执行动画的对象
*attr:要执行动画的样式,比如left,top,width(传字符串参数的时候要带引号)
*target:执行动画的目标位置
*speed:一定的速度(整数向右移动,负数向左移动)
*callback毁掉函数将在动画执行完毕后执行
*/
function move(obj,attr,target,speed,callback){
clearInterval(obj.timer);
var current =parseInt(getStyle(obj,attr));
if(current > target){
speed = -speed;
}
obj.timer = setInterval(function(){
var oldValue =parseInt(getStyle(obj,attr));
var newValue = oldValue + speed;
/* if(newValue>target){
speed = -speed;
} */
if(speed < 0 && newValue<target || speed > 0 && newValue > target){
newValue = target;
}
obj.style[attr] = newValue + "px";
if(newValue == target){
clearInterval(obj.timer);
callback && callback();
}
},30)
}
function getStyle(obj , name){
if(window.getComputedStyle){
//正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
/* return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name]; */
}
Javascript-定时器+获取样式的封装函数-应用于简单样式动画
最新推荐文章于 2021-03-18 20:08:04 发布