//獲取obj的屬性（樣式）attr，如'height'、'width'等
function?getStyle(obj,?attr)?{?
	if(obj.currentStyle)?{?
	return?obj.currentStyle[attr];?
	}?
	else?{?
	return?getComputedStyle(obj,false)[attr];?
	}?
}
//完整運動動畫框架
function?motionFrame(obj,json,fn)?{
	clearInterval(obj.timer);//只清除此obj的定時器，不影響其他物體運動
	obj.timer=setInterval(function?()?{
		var?flag=true;//是否json中所有運動都完成
		//每30ms所有屬性值都會運動一次，+speed
		//遍歷一遍，只要有沒達到的flag就為false，否則flag不變仍為true
		for(var?attr?in?json){
			//獲得要改變的當前屬性值
			var?curr=0;
			if?(attr=='opacity')?{
				curr=Math.round(parseFloat(getStyle(obj,attr))*100);
			}?else?{
				curr=parseInt(getStyle(obj,attr));
			}
????????????//改變速度處理
			var?speed=0;
			speed=(json[attr]-curr)/8;//根據目標值與當前值的差改變速度，緩沖，差距越大速度越快，差距越小速度越慢
			speed=speed>0?Math.ceil(speed):Math.floor(speed);//達到整數值
			//檢測是否達到目標值
			if(curr!=json[attr]){
				flag=false;//沒到目標，需繼續執行
			}
			//obj運動過程
			if(attr=='opacity'){
				obj.style.filter='alpha(opacity:'+(curr+speed)+')';
				obj.style.opacity=(curr+speed);
			}else{
				obj.style[attr]=curr+speed+'px';
			}
		}
		//多個屬性值已經同時改變且達到目標值
		if(flag){
			clearInterval(obj.timer);
			//檢測是否有回調函數
			if(fn){
				fn();
			}
		}
	},30);
}


window.onload=function?()?{
	var??list=document.getElementsByTagName('li');
	//var??timer=null;
	for?(var?i=0;i<list.length;i++)?{
		//list[i].timer=null;
		list[i].onmouseover=function?()?{
			motionFrame(list[i],{height:150,width:100,opacity:70});
		}
		list[i].onmouseout=function?()?{
			motionFrame(list[i],{height:100,width:150,opacity:30});
		}
	}
}