纯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){//匀速stepfnEffect = 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])/8nSpeed=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{//endreturn  '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;}}