原生js封装的运动框架，move-1.0.js-CSDN博客

function getStyle(obj,name){				//获取非行间样式函数
	if(obj.currentStyle){
		return obj.currentStyle[name];			//兼容ie系列
	}else{
		return getComputedStyle(obj,false)[name];	//兼容火狐和chrome
	}
}

function startMove(obj,json,fn){	//运动框架

	clearInterval(obj.timer);		//定时器先清后开
	
	obj.timer=setInterval(function(){	
		var bStop=true;		//用于检测每项运动是否完成的标识

		for(var attr in json){
			var cur=0;		//变量cur用来存放获取到的现有样式值

			if(attr=='opacity'){			//获取现有样式，不透明度和其他样式分开
				cur=Math.round(parseFloat(getStyle(obj,attr))*100);
			}else{
				cur=parseInt(getStyle(obj,attr));
			}	

			var iSpeed=(json[attr]-cur)/6;			//缓冲运动计算速度
			iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);	   //判断向上或向下取整

			if(cur!=json[attr]){		//若每次循环有未达到目标的项目，设置为false
				bStop=false;
			}


			cur+=iSpeed;					//物体运动函数
			if(attr=='opacity'){
				obj.style.filter='alpha(opacity='+cur+')'
				obj.style.opacity=cur/100;
			}else{
				obj.style[attr]=cur+'px';
			}
			
		}

		if(bStop==true){			//当bStop为true时才结束循环
			clearInterval(obj.timer);
			if(fn){fn();}		//链式运动函数
		}
		
	},30)
}

简单说一下

用getStyle函数获取对象现有的样式，因为直接使用offset获取对象样式存在bug，offset获取的是包含content的width，padding和border的盒子模型宽度，而style.width设置的仅仅是包含content的width值，不含padding和border。当对象有border和padding值时会造成运动效果错误。
运动函数startMove包含三个参数，分别是obj--需添加运动效果的对象；json--运动对象改变的样式及数值；fn--回调函数（可选）。对象运动时改变的样式名和数值是以json的方作为参数传入，可以通知改变多个值。
运动过程依然是用计时器实现的，setInterval前一定要保证先clearInterval，防止多个定时器同时开启。
定义bStop变量，用于确定当多个运动同时发生时，检测每个运动事件是否完成，若有为完成的运动，值设为false，确定所有运动完成即bStop值为true时，停止计时器clearInterval停止运动。
for in循环出获取到的对象样式，存在变量cur中。加个获取样式判断，若获取的是opacity，opacity*100并四舍五入取整，若是其他样式，加上px。
缓冲运动的速度采用的是对象样式的（目标值-现有值）再除以任意数字，数字越大运动速度越慢。因为现有值在不断变化，所以越接近目标值速度越慢，达到缓冲的目的。速度需要做判断，若是正向运动，（目标值-现有值）结果为正，向上取整，若是反向运动，（目标值-现有值）结果为负，想下取整。
cur与速度进行叠加运算后赋值给obj.style，实现运动效果。
判断回调函数fn是否存在，若存在则执行fn();
具体的调用方式如下：
```
startMove(obj,{'width':500,'height':500,'opacity':0.5});
```
注意：改变宽高和定位的时候不需要加px，函数会自动给加上。
以上就是一个较为完美的运动框架，加上布局后调用可以实现各大网站上主流的焦点图，轮播图的运动效果以及其他一些运动效果。欢迎大家吐槽，相互交流~O(∩_∩)O~