//獲取obj的屬性（樣式）attr，如'height'、'width'等
function?getStyle(obj,?attr)?{?
	if(obj.currentStyle)?{?
	return?obj.currentStyle[attr];?
	}?
	else?{?
	return?getComputedStyle(obj,false)[attr];?
	}?
}
//完整運(yùn)動(dòng)動(dòng)畫框架
function?motionFrame(obj,json,fn)?{
	clearInterval(obj.timer);//只清除此obj的定時(shí)器，不影響其他物體運(yùn)動(dòng)
	obj.timer=setInterval(function?()?{
		var?flag=true;//是否json中所有運(yùn)動(dòng)都完成
		//每30ms所有屬性值都會(huì)運(yùn)動(dòng)一次，+speed
		//遍歷一遍，只要有沒達(dá)到的flag就為false，否則flag不變?nèi)詾閠rue
		for(var?attr?in?json){
			//獲得要改變的當(dāng)前屬性值
			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;//根據(jù)目標(biāo)值與當(dāng)前值的差改變速度，緩沖，差距越大速度越快，差距越小速度越慢
			speed=speed>0?Math.ceil(speed):Math.floor(speed);//達(dá)到整數(shù)值
			//檢測是否達(dá)到目標(biāo)值
			if(curr!=json[attr]){
				flag=false;//沒到目標(biāo)，需繼續(xù)執(zhí)行
			}
			//obj運(yùn)動(dòng)過程
			if(attr=='opacity'){
				obj.style.filter='alpha(opacity:'+(curr+speed)+')';
				obj.style.opacity=(curr+speed);
			}else{
				obj.style[attr]=curr+speed+'px';
			}
		}
		//多個(gè)屬性值已經(jīng)同時(shí)改變且達(dá)到目標(biāo)值
		if(flag){
			clearInterval(obj.timer);
			//檢測是否有回調(diào)函數(shù)
			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});
		}
	}
}