JS运动函数封装

完美运动函数的封装

//支持完美运动、链式运动和多物体运动
//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];
	}
}