js运动框架函数

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LiyangBai/article/details/85195332

第一种：只支持属性值为px的属性移动的框架 

/**
 * [运动框架函数，支持容器的各种属性变化] 
 * @description [该运动框架只支持属性值为px的属性]
 * @param  {[obj]} obj     [容器div对象]
 * @param  {[string]} attr    [要移动的容器属性]
 * @param  {[number]} iTarget [属性的目标数字]
 * @param {number} [time] [时间间隔，默认50ms]
 * @return {[type]}         [description]
 */
function startMove(obj, attr, iTarget, time){
	time = time || 50;
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var cur=parseInt(getStyle(obj, attr));
		
		var speed=(iTarget-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(cur==iTarget){
			clearInterval(obj.timer);
		}else{
			obj.style[attr]=cur+speed+'px';
		}
	}, time);
}

第二种：支持任意值属性的运动框架

/**
 * [运动框架函数，支持容器的各种属性变化] 
 * @param  {[obj]} obj     [容器div对象]
 * @param  {[string]} attr    [要移动的容器属性]
 * @param  {[number]} iTarget [属性的目标数字]
 * @param {number} [time] [时间间隔，默认50ms]
 * @return {[type]}         [description]
 */
function startMove(obj, attr, iTarget, time){
	time = time || 50;
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var cur=0;
		if(attr=='opacity'){
			cur=Math.round(parseFloat(getStyle(obj, attr))*100);
		}else{
			cur=parseInt(getStyle(obj, attr));
		}
		var speed=(iTarget-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		if(cur==iTarget){
			clearInterval(obj.timer);
		}else{
			if(attr=='opacity'){
				obj.style.filter='alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity=(cur+speed)/100;
			}else{
				obj.style[attr]=cur+speed+'px';
			}
		}
	}, time);
}