纯dom动画框架可以满足常用的需求 包含四种常用动画样式(匀速，减速，橡皮筋，反弹)

/*动画框架可基于这个做图片轮播 等常用功能*/
EFFECT = {step:0,buffer:1,flex:2,bound:3}
function animate(ele,obj,nEffect,fnCallback){
	var fnEffect ;
	if (typeof nEffect == 'number')
	{
		if(nEffect >=0&& nEffect<=3){
			
		}else{
			alert('数字有误动画类型不支持');
		}
	}
	if (typeof nEffect == 'string')
	{
		nEffect = nEffect.toLowerCase();
		switch (nEffect)
		{
		case 'step': nEffect = 0;break;
		case 'buffer': nEffect = 1;break;
		case 'flex': nEffect = 2;break;
		case 'bound': nEffect = 3;break;
		default :alert('字符串有误,动画类型不支持');throw new Error("字符串有误,动画类型不支持");
		
		}
	}
	if(nEffect==0){
		//匀速step
		fnEffect = step;
	}else if(nEffect==1){
		//刹车
		fnEffect = buffer;
	}else if(nEffect==2){
		//flex弹性
		fnEffect = flex;
	}else if(nEffect==3){
		//还得算方向弹性反弹
		var fnEffect={}
		for(var attr in obj){
			var direction = toOffectAttr(attr);
			if(ele[direction]>obj[attr]){
				//反方向
				fnEffect[attr] = negativeBound;
			}else if(ele[direction]<obj[attr]){
				//正方向
				fnEffect[attr] = bound;
			}
		
		}
		
	}
	move()

function move(){

	window.clearTimeout(ele.timer);
	o = obj;
	var flag=false;//默认都到达了终点,false表示不再进行运动了
	if (typeof fnEffect =='function')

	{
		for(var attr in o){
		
		if(fnEffect(ele,attr,o[attr])!='ok'){
			flag=true;
		}
		}
	}else if(typeof fnEffect == 'object'){
		for(var attr in o){
			if(fnEffect[attr](ele,attr,o[attr])!='ok'){
				flag=true;
			}
		}
	}
	if(flag){
	ele.timer=window.setTimeout(move,20);
	}else{
		if(fnCallback){
			//执行回调方法
			fnCallback.call(ele);
		}
		
	}
}

function processFn(ele,o,fnEffect,fnCallback){
	return function(){move(ele,o,fnEffect,fnCallback)};

}
//减速
function buffer(ele,direction,target){
	var attr=direction;
	if(direction=='opacity'){//不透明度单独处理
		if(target>1||target<0){
			alert('不透明度的值越界！');
			throw new Error('不透明度的值越界！')
		}
		if(ele.style.opacity==''||typeof ele.style.opacity=='undefined'){
			ele.style.opacity=1;
			ele.style.filter='alpha(opacity=100)';			
		}
		var nOffset=0.003;	
		var fOpacity=parseFloat(ele.style.opacity);
		if(target>fOpacity){//往大处变化
			
			if(fOpacity+nOffset>target){
				ele.style.opacity=target;
				ele.style.filter='alpha(opacity='+target*100+')'//IE的
			}else{
			ele.style.opacity=fOpacity+nOffset;
			ele.style.filter='alpha(opacity='+(fOpacity+nOffset)*100+')';
			}
		}else if(target<fOpacity){
			nOffset*=-1;	
			if(fOpacity+nOffset<target){
				ele.style.opacity=target;
				ele.style.filter='alpha(opacity='+target*100+')';//IE
			}else if(target>fOpacity){
			ele.style.opacity=fOpacity+nOffset;
			ele.style.filter='alpha(opacity='+(fOpacity+nOffset)*100+')';
			}
		}else{
				//说明已经到达终点了
				return 'ok';
			}
		
	}else{//处理left,top,width,height这四个方向
		direction = toOffectAttr(direction);

		//减速运动的算法就简单多了	
		var nSpeed=(target-ele[direction])/8
		nSpeed=nSpeed>0?Math.ceil(nSpeed):Math.floor(nSpeed);
		ele.style[attr]=ele[direction]+nSpeed+'px';
		if(nSpeed==0){//当速度为0时，就是已经到达目的地了
			return 'ok';	
		}
	
	}
	
}
//反弹
function bound(ele,direction,target){
	var attr=direction;
	if(direction=='opacity'){//不透明度单独处理
		if(target>1||target<0){
			alert('不透明度的值越界！');
			throw new Error('不透明度的值越界！')
		}
		if(ele.style.opacity==''||typeof ele.style.opacity=='undefined'){
			ele.style.opacity=1;
			ele.style.filter='alpha(opacity=100)';			
		}
		var nOffset=0.003;	
		var fOpacity=parseFloat(ele.style.opacity);
		if(target>fOpacity){//往大处变化
			
			if(fOpacity+nOffset>target){
				ele.style.opacity=target;
				ele.style.filter='alpha(opacity='+target*100+')'//IE的
			}else{
			ele.style.opacity=fOpacity+nOffset;
			ele.style.filter='alpha(opacity='+(fOpacity+nOffset)*100+')';
			}
		}else if(target<fOpacity){
			nOffset*=-1;	
			if(fOpacity+nOffset<target){
				ele.style.opacity=target;
				ele.style.filter='alpha(opacity='+target*100+')';//IE
			}else if(target>fOpacity){
			ele.style.opacity=fOpacity+nOffset;
			ele.style.filter='alpha(opacity='+(fOpacity+nOffset)*100+')';
			}
		}else{
				//说明已经到达终点了
				return 'ok';
			}
		
	}else{//处理left,top,width,height这四个方向
		direction = toOffectAttr(direction);
	
		//弹性算法稍稍有一点麻烦，就是要保存各个属性上的速度
		if(typeof ele[attr+'flexSpeed']=='undefined'){
			//把速度保存在当前这个运动的元素的自定义属性上
			ele[attr+'flexSpeed']=0;
		}
		if(typeof ele[attr+'flag']=='undefined'){
			ele[attr+'flag']=0;
		}
		var 加速度=9;
		ele[attr+'flexSpeed']+=加速度;
		ele[attr+'flexSpeed']*=0.93;
		if(ele[direction]+ele[attr+'flexSpeed']>target){
			ele.style[attr]=target+'px';
			ele[attr+'flexSpeed']*=-1;
			ele[attr+'flag']++
		}else{
		ele.style[attr]=ele[direction]+ele[attr+'flexSpeed']+'px';
		ele[attr+'flag']=0;
		}
		//表示连续多次到达目的地（超过了三次），则已经停在目的地了
		if(ele[attr+'flag']>3){
			return 'ok';//表示可以停止了
		}
		
	
	}
	
}
//匀速方法
function step (ele,direction,target){
	var attr = direction;
	//var nOffset = 5;
	if(direction == 'opacity'){
		if (target>1 || target<0)
		{alert('不透明度参数不合法');
			throw new Error('透明度参数不合法')
		}
		if (ele.style.opacity == "" || typeof ele.style.opacity =='undefined')
		{
			ele.style.opacity = 1;
			ele.style.filter = 'alpha(opacity=100)';
		}
		if(target>parseFloat(ele.style.opacity)){
			var nOffset = 0.033;
			if((parseFloat(ele.style.opacity)+nOffset)>target){
				ele.style.opacity = target;
				ele.style.filter = "alpha(opacity="+target*100+")";
			}else{
				ele.style.opacity = parseFloat(ele.style.opacity) + nOffset;
				ele.style.filter = "alpha(opacity="+(parseFloat(ele.style.opacity)+nOffset)*100+")";
			}	
		}else if(target<(parseFloat(ele.style.opacity))){
			var nOffset =-0.033;
			if(parseFloat(ele.style.opacity)+nOffset<target){
				ele.style.opacity = target;
				ele.style.filter = "alpha(opacity="+target*100+")";
			}else{
				ele.style.opacity = (parseFloat(ele.style.opacity) +nOffset);
				ele.style.filter = "alpha(opacity="+(parseFloat(ele.style.opacity)+nOffset)*100+")";
			}
		
		}else{
			//end
			return  'ok';
		}
	
	}else{
		direction = toOffectAttr(direction);
		if(target>oDiv[direction]){
			var num = 5;
			//过界判断
			if (ele[direction]+num>target)
			{
				ele.style[attr] = target+'px';
			}else{
				ele.style[attr] = ele[direction]+num+'px';
			}

		}else if(target<oDiv[direction]){
			var num = -5;
			//过界判断
			if (ele[direction]+num<target)
			{
				ele.style[attr] = target+'px';
			}else{
				ele.style[attr] = ele[direction]+num+'px';
			}
		}else {
			//到达目的地  
			return 'ok';
		}
	}
	
 }
//弹性橡皮筋方法
function flex(ele,direction,target){
	var attr=direction;
	if(direction=='opacity'){//不透明度单独处理
		if(target>1||target<0){
			alert('不透明度的值越界！');
			throw new Error('不透明度的值越界！')
		}
		if(ele.style.opacity==''||typeof ele.style.opacity=='undefined'){
			ele.style.opacity=1;
			ele.style.filter='alpha(opacity=100)';			
		}
		var nOffset=0.003;	
		var fOpacity=parseFloat(ele.style.opacity);
		if(target>fOpacity){//往大处变化
			
			if(fOpacity+nOffset>target){
				ele.style.opacity=target;
				ele.style.filter='alpha(opacity='+target*100+')'//IE的
			}else{
			ele.style.opacity=fOpacity+nOffset;
			ele.style.filter='alpha(opacity='+(fOpacity+nOffset)*100+')';
			}
		}else if(target<fOpacity){
			nOffset*=-1;	
			if(fOpacity+nOffset<target){
				ele.style.opacity=target;
				ele.style.filter='alpha(opacity='+target*100+')';//IE
			}else if(target>fOpacity){
			ele.style.opacity=fOpacity+nOffset;
			ele.style.filter='alpha(opacity='+(fOpacity+nOffset)*100+')';
			}
		}else{
				//说明已经到达终点了
				return 'ok';
			}
		
	}else{//处理left,top,width,height这四个方向
		direction = toOffectAttr(direction);
	
		//弹性算法稍稍有一点麻烦，就是要保存各个属性上的速度
		if(typeof ele[attr+'flexSpeed']=='undefined'){
			//把速度保存在当前这个运动的元素的自定义属性上
			ele[attr+'flexSpeed']=0;
		}
		ele[attr+'flexSpeed']+=(target-ele[direction])/8;
		if(Math.abs(ele[attr+'flexSpeed'])<1&&Math.abs(target-ele[direction])<1){
			return 'ok';//表示可以停止了
		}
		ele[attr+'flexSpeed']*=0.87;
		ele.style[attr]=ele[direction]+ele[attr+'flexSpeed']+'px';
		//当速度接近0并且位置接近终点的时候停止
		
		
	
	}
	
}
//反向反弹方法
function negativeBound(ele,direction,target){
	var attr=direction;
	if(direction=='opacity'){//不透明度单独处理
		if(target>1||target<0){
			alert('不透明度的值越界！');
			throw new Error('不透明度的值越界！')
		}
		if(ele.style.opacity==''||typeof ele.style.opacity=='undefined'){
			ele.style.opacity=1;
			ele.style.filter='alpha(opacity=100)';			
		}
		var nOffset=0.003;	
		var fOpacity=parseFloat(ele.style.opacity);
		if(target>fOpacity){//往大处变化
			
			if(fOpacity+nOffset>target){
				ele.style.opacity=target;
				ele.style.filter='alpha(opacity='+target*100+')'//IE的
			}else{
			ele.style.opacity=fOpacity+nOffset;
			ele.style.filter='alpha(opacity='+(fOpacity+nOffset)*100+')';
			}
		}else if(target<fOpacity){
			nOffset*=-1;	
			if(fOpacity+nOffset<target){
				ele.style.opacity=target;
				ele.style.filter='alpha(opacity='+target*100+')';//IE
			}else if(target>fOpacity){
			ele.style.opacity=fOpacity+nOffset;
			ele.style.filter='alpha(opacity='+(fOpacity+nOffset)*100+')';
			}
		}else{
				//说明已经到达终点了
				return 'ok';
			}
		
	}else{//处理left,top,width,height这四个方向
		direction = toOffectAttr(direction);
	
		//弹性算法稍稍有一点麻烦，就是要保存各个属性上的速度
		if(typeof ele[attr+'flexSpeed']=='undefined'){
			//把速度保存在当前这个运动的元素的自定义属性上
			ele[attr+'flexSpeed']=0;
		}
		if(typeof ele[attr+'flag']=='undefined'){
			ele[attr+'flag']=0;
		}
		var 加速度=9;
		ele[attr+'flexSpeed']-=加速度;
		ele[attr+'flexSpeed']*=0.83;
		if(ele[direction]+ele[attr+'flexSpeed']<target){
			ele.style[attr]=target+'px';
			ele[attr+'flexSpeed']*=-1;
			ele[attr+'flag']++
		}else{
		ele.style[attr]=ele[direction]+ele[attr+'flexSpeed']+'px';
		ele[attr+'flag']=0;
		}
		//表示连续多次到达目的地（超过了三次），则已经停在目的地了
		if(ele[attr+'flag']>3){
			return 'ok';//表示可以停止了
		}
		
	
	}
}
/*判断属性的公用方法*/
function toOffectAttr(attr){
	var direction;
	switch(attr){
		case 'left':
			direction='offsetLeft';
			break;
		case 'top':
			direction='offsetTop';
			break;
		case 'width':
			direction='offsetWidth';
			break;
		case 'height':
			direction='offsetHeight';
			break;
		default :
		alert('不支持此方向的运动！');
		throw new Error('不支持此方向的运动！');		
	}
	return direction;

}
}