                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

請問這個BUG是什么情況？謝謝

<!DOCTYPE?html>
<html>

	<head>
		<meta?charset="GB2312">
		<title>json</title>
		<style?type="text/css">
			*?{
				margin:?0;
				padding:?0;
			}
			
			.lis?{
				height:?260px;
				width:?260px;
				background-color:?antiquewhite;
				border-radius:?60px;
				margin-top:?10px;
				line-height:?60px;
				text-align:?center;
				border:?5px?solid?cadetblue;
				opacity:?0.5;
				box-shadow:?5px?2px?10px?darkred;
			}
		</style>
		<script?src="speed_flash/donghua.js"></script>
		<script?type="text/javascript">
		window.onload=function(){
			var?oli=document.getElementById("lis");
			oli.onmouseover=function(){
				lis_over(oli,10,0,{width:400,height:460});
			}
		}
		</script>
	</head>

	<body>
		<ul?id=oul>
			<li?class="lis"?id="lis">imooc</li>
		</ul>
	</body>

</html>

function?lis_over(obj,?speed,?lg,?json,?fn)?{
	obj.timer?=?null;
	var?sp?=?10,
		flag?=?true;
	clearInterval(obj.timer);
	obj.timer?=?setInterval(function()?{
		
		for?(var?sty?in?json)?{
			//樣式值處理
			var?wd?=?window.getComputedStyle(obj,?null)[sty];
			if?(sty?==?'opacity')?{
				wd?=?Math.round(parseFloat(wd)?*?100)/100;
			}?else?{
				wd?=?parseInt(wd);
			}
			//判斷結束
			if?(wd?!=?json[sty])?{
				flag?=?false;
			}
			if?(flag)?{
				clearInterval(obj.timer);
				if?(fn)?{
					fn();
				}
			}
			//速度正負判斷
			if?(lg?!=?0)?{
				speed?=?-10;
			}
			//透明度
			if?(sty?==?'opacity')?{
				var?a?=?wd*100?+?speed;
				obj.style[sty]?=?a?/?100;
			}?else?{
				obj.style[sty]?=?wd?+?speed?+?"px";
			}
		}
	},?100)
}

謝謝！我是希望能夠同時運動，然后等大家運動到達目的地才結束！

飛天意大利面神獸

2016-07-05

源自：JS動畫效果 6-2

關注問題我要回答

1283

操作

收起

4 回答

右下角_ 回答被采納 +3 積分
2016-07-05

抱歉啊，前面的回答，并沒有解決你的問題，又看了下代碼，發(fā)現問題就在你把速度固定了，也就是當 width達到目標值400的時候，而height此時400 并沒有達到目標值，定時器不會停止，下一次而width的值就變成了410，大于了width的目標值400，而當 height達到目標值時，width的值也在逐漸增大，早就超出了目標值的400，這樣就永遠不會停止了，也就是說除非 width同時達到目標值，例如lis_over(oli,10,0,{width:400,height:400});否則都不會停止。這也是老師在代碼中?var speed = (json[sty]-wd)/8;用目標值減去現在值，當二者相同時 speed就變成了0，不在增加或減少，等待其他屬性達到目標值速度變?yōu)?，就自然停止了