JS------动画模式改变样式的封装(新手)

（这里封装的是对象，为的是之后有新的方法可以放到一起，只提取其中的方法也是可以的）

功能：

这里封装的是一个对象，用来改变元素的样式

用法：

new出来就可以了

方法一：

animation_change(ele,attr,target,[mode,[st,[sd]]])

必要参数：ele（目标元素）、attr（目标样式）、target（变化的大小）

可选参数：mode（0代表target参数给的是变化量，1代表target参数给的是目标量，2代表target参数给的是样式值，默认为0）、st（步进时间）、sd（步进距离）

（使用注意：1.变化量好理解，而目标量是以第一次调用该方法为基准0，并不是指目标样式的值的大小，最后的样式值是你需要样式的最终数值。2.方法内我设置了自锁给定时器，在定时器结束前是无法再次调用的）

//对象-----用来改变样式
function ChangeEngine(step_time,step_distance){
	//默认属性
	this.step_time=step_time||20;//每次移动的时间
	this.step_distance=step_distance||2;//每次移动的距离
	
	//方法

	//移动
	this.animation_change=function(ele,attr,target,mode,st,sd){//attr代表要修改的样式,mode=0代表距离移动，=1代表位置移动，=2代表数值移动
		//在目标元素内添加成员，用来记录进度
		if(typeof(ele["current_"+attr])=='undefined'){
			//不存在就构造
			ele["current_"+attr]=0;
		}
		if(typeof(ele["move_able_"+attr])=='undefined'){
			//不存在就构造
			ele["move_able_"+attr]=true;
		}

		//初始化
		var step_time=st||this.step_time||20;
		var step_distance=sd||this.step_distance||2;
		var element=ele;//目标元素
		var origin_position=element["current_"+attr];//记录本次移动前的位置

		var attr=attr;
		var origin_attr=parseInt(getStyle(element,attr));//起始样式大小
		var mode=mode||0;
		//设置不同模式的实际改变量
		switch(mode){
			case 0:
				var distance=target;break;
			case 1:
				var distance=target-origin_position;break;
			case 2:
				var distance=target-origin_attr;break;
			default:return;
		}
		var direction=distance>0?1:-1;
		var current=0;//记录实时进度
		//判断此时是否可移动
		if(element["move_able_"+attr]!=true){
			return;
		}else{
			//自锁
			element["move_able_"+attr]=false;
		}
		var clock=setInterval(function(){
			//判断是否到达目标位置
			if(Math.abs(current-distance)<=step_distance){
				//直接移动到指定位置
				element.style[attr]=origin_attr+distance+"px";//修改元素样式
				element["current_"+attr]=origin_position+distance;//修改对象内的位置记录
				
				//关闭定时器
				clearInterval(clock);
				//去掉自锁
				element["move_able_"+attr]=true;
                return;
			}
			current=current+step_distance*direction;//记录本次移动的进度
			element.style[attr]=origin_attr+current+"px";//修改元素样式
			element["current_"+attr]=origin_position+current;//修改对象内的位置记录
		},step_time);
	};
    //获取style标签内属性函数的封装
    function getStyle(ele,attr){
	    if(ele.currentStyle){
	    	return ele.currentStyle[attr];//IE浏览器
    	}else{
    		return getComputedStyle(ele, false)[attr];//火狐浏览器
    	}
    }
}