完美运动函数的封装
//支持完美运动、链式运动和多物体运动
//obj 代表 操作的元素
//json 代表要操作的多个属性和目标值
//callback 代表一个函数 当一个函数作为参数时,这样的参数叫做 回调函数
//回调函数用在链式运动中
function startMove( obj , json , callback ){
clearInterval( obj.timer );
obj.timer = setInterval( function(){//多物体运动时防止共用一个定时器,导致其他物体不能正常运动
var flag = true;//假设值为 true时 可以停止定时器
for( var attr in json ){
var current = 0;//用于接收非行内元素样式值
if( attr == "opacity" ){//对opacity的单独判断
current = parseFloat( getStyle(obj,attr) ) * 100;
}else if( attr == "zIndex" ){//对z-index 单独判断
current = parseInt( getStyle(obj,attr) ) ;
}else{
current = parseInt( getStyle(obj,attr) ) ;//获取元素的实际样式值
}
var speed = (json[attr] - current)/10;//得到变化的速度
speed = speed>0?Math.ceil(speed) : Math.floor(speed);
if( json[attr] != current ){//这里判断的目的是为了防止多属性同时变化时某一个属性到达目标值时停止定时器,其他属性可能回到达不了目标值
flag = false;//没有达到目标值 flag要做改变
}
//没有达到目标值 继续设置运动物体的样式改变
if( attr == "opacity" ){
obj.style["opacity"] = (current + speed)/100;
}else if( attr == "zIndex" ){
obj.style[attr] = json[attr];
}else{
obj.style[attr] = current + speed + "px";
}
}
//循环结束后,判断是否达到了目标值
if( flag ){//达到目标值
clearInterval( obj.timer );
//进入到下一个动作(可变功能)
if( callback ){//调用回调函数,产生链式运动
callback();
}
}
},30 )
}
//获取非行内元素样式值的兼容写法
//attr参数表示 样式属性
//obj 表示操作的元素
function getStyle(obj,attr){
if( getComputedStyle ){
return window.getComputedStyle(obj,false)[attr];
}else{
return obj.currentStyle[attr];
}
}