                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

為什么我跟著老師敲的代碼，同時運動用json替代以后，沒有效果？

function?startMove(obj,?json,?fn)?{

????clearInterval(obj.timer);?//清除定時器，避免重復生成多個定時器
????obj.timer?=?setInterval(function()?{
????????var?flag?=?true;?//假設剛開始時所有運動都已完成
????????for?(var?attr?in?json)?{?//遍歷json

????????????var?icur?=?null;
????????????//1.判斷類型
????????????if?(attr?==?'opacity')?{
????????????????icur?=?Math.round(parseFloat(getStyle(obj,?attr))?*?100);
????????????}?else?{
????????????????icur?=?parseInt(getStyle(obj,?attr));
????????????}
????????????//2.算速度
????????????var?speed?=?(json[attr]?-?icur)?/?10;
????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
????????????//3.檢測停止
????????????if?(icur?!=?json[attr])?{
????????????????flag?=?false;
????????????}
????????????if?(attr?==?'opacity')?{
????????????????obj.style.filter?=?'alpha(opacity:'?+?(icur?+?speed)?+?')';
????????????????obj.style.opacity?=?(icur?+?speed)?/?100;
????????????}?else?{
????????????????obj.style[attr]?=?icur?+?speed?+?'px';
????????????}
????????}
????????if?(flag)?{?//當所有運動都完成時，清除定時器
????????????clearInterval(obj.timer);
????????????if?(fn)?{
????????????????fn();
????????????}
????????}
????},?30);
}


function?getStyle(obj,?attr)?{
????if?(obj.currentStyle)?{
????????return?obj.currentStyle[attr];
????}?else?{
????????return?getComputedStyle(obj,?false)[attr];
????}
}

HTML文檔——————————

<!doctype?html>
<html>
<head>
	<meta?charset="utf-8">
	<title>同時運動</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		
		ul,li?{
????????????list-style:none;
????????}
		
????????ul?li?{
????????????width:200px;
????????????height:100px;
????????????background:yellow;
????????????margin-bottom:20px;
			border:4px?solid?#000;
			filter:alpha(opacity:30);
			opacity:0.3;?
????????}
	<script?src="js/move.js"></script>
	<script>
		window.onload=function(){
			var?oLi=document.getElementById('li1');
			oLi.onmouseover=function(){
				startMove1(oLi,{width:400,height:200});
			}
		}
	</script>
	</style>
	
	</head>
	<body>
		<ul>
			<li?id="li1"></li>
		</ul>
	</body>
</html>