句句解析js中的完美 / 缓冲运动框架（新手专用）

1.完美运动框架对于初学者来说，还是非常必要的，所以要好好分析。

2. 基础牢固者，尽量就不要看注释了，巩固复习旧知识！

//js完美运动框架
//函数(对象，{style1:目标值1, style2:目标值2}, 运动时间, 结束运动后的函数)
function startMove(obj, json, time, fn) 
{
	clearInterval(obj.iTimer);  //先关闭定时器
	var iCur = 0;				//先var一个iCur变量值，即style变化为的值，变化值              
	var iSpeed = 0;             //再var一个iSpeed变量值，即style变化的速度值，变速值
	obj.iTimer = setInterval(function() //再开一个自身的定时器
	{
		var iBtn = true;        //打开一个开关，给这个开关一个true的值
		for(var attr in json)   //for循环，依次将json数组中的style值遍历
		{
			var iTarget = json[attr];  //将目标值赋给iTarget
			if(attr == 'opacity')      //如果style值是opacity值
			{						
				iCur = Math.round(css(obj, 'opacity') * 100);// 先调用css()方法获取style值赋给iCur变化值，再将其先*100，然后四舍五入取整  
			} 
			else                       //如果style值是其他的呢
			{		
				iCur = parseInt(css(obj, attr));//先调用css()方法获取style值赋给iCur变化值，再将其直接取整
			}
			iSpeed = (iTarget - iCur) / time; //将目标值和iCur变化值的差除以一个变量赋给iSpeed变速值，这个变量可是控制速度，time越大，变化时间就越长
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//然后再用条件表达式，将变速值向上取整
			if(iCur != iTarget)  //如果变化值没有达到目标值时，达到了目标值就不进入这个判断语句中
			{
				iBtn = false; //将开关关掉，关不掉定时器，继续循环
				if(attr == 'opacity') //如果style值是opacity时
				{
					obj.style.opacity = (iCur + iSpeed) / 100;//变化对象的opacity值
					obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';//变化对象的filter值
				}
				else  //如果style值是其他的呢，像长宽，位置等等px的style值
				{
					obj.style[attr] = iCur + iSpeed + 'px'; //变化其style值
				}
			};
		};
		if(iBtn) //如果开关是true开着的，就执行语句
		{
			clearInterval(obj.iTimer); //关闭定时器
			fn && fn.call(obj); //执行fn函数
		}
	}, 30);
};

      // 获取样式的方法
function css(obj, attr) 
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[attr];
	}
	else 
	{
		return getComputedStyle(obj, false)[attr];
	}
};

3.复制以上代码保存为startMove.js脚本文件，导入html文档即可。

4.在需要使用的js代码中，调用startMove（）这个方法，就可以了。例如：

window.onload = function () {
    // 一盒子 一按钮
    var aDiv = document.getElementById('box');
    var aBtn = document.getElementsByTagName("button")[0];
    // 按钮点击事件
    aBtn.onclick = function () {
       // 调用完美运动框架(作用对象，{style1:目标值1, style2:目标值2}, 运动时间, 结束运动后的函数)
        startMove(aDiv,{
            left : 500,
            width:1000,
            opacity : 40
        },30,function () {
            alert("运动完毕！")
        });
    }
}