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("運動完畢！")
        });
    }
}