關(guān)于多物體運動課程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
width: 100px;
height: 50px;
background: red;
margin-bottom: 10px;
list-style: none;
border: 1px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
var li=document.getElementsByTagName("li")
for(i=0;i<li.length;i++){
li[i].index=null
li[i].onmouseover=function(){
yidong(this,400)
}
li[i].onmouseout=function(){
yidong(this,100)
}
}
}
// var dingshiqi=null
function yidong(wuti,juli){?
clearInterval(wuti.dingshiqi)
wuti.dingshiqi=setInterval(function(){
var sudu=(juli-wuti.offsetWidth)/10
sudu=sudu>0?Math.ceil(sudu):Math.floor(sudu)
if(wuti.offsetWidth==juli){
clearInterval()
alert(wuti.style.width)
}else{
wuti.style.width=wuti.offsetWidth+sudu+"px"
}
},50)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
這段代碼在瀏覽器里運行最后當鼠標移入的時候width的值達到409
鼠標移除的時候width的值是118
和我自己設定的400或者100是不同的，為什么？
409這個值和118這個值是怎么算出來的有沒有大神告訴我
說的明白的立即采納，隨時在線
2017-02-21
我們分兩個情況，第一個情況是加到 400 的時候，第二個情況是減到 100 。
在此之前，我們把下面這句代碼轉(zhuǎn)化一下：
你也知道，當前 wuti.offsetWidth = wuti.style.width + 2，當然這只是說明意思，實際中不能這樣等，那么把這個等式代入上面的代碼中，將 wuti.style.width 替換掉：
這是內(nèi)部實際發(fā)生的變化，這里作說明用，offsetWidth 是只讀變量，不能直接修改。
下面討論第一種情況，加到 400，先上兩張截圖：
我在你設置 sudu 的代碼下面加了一句 console.log，用于控制臺輸出
這張圖是加到 411 的異常情況，可以看到，最后一條輸出已經(jīng) 3840 次，也就是說進了死循環(huán)。
先看 offsetWidth 為 398 時，sudu 是 1，執(zhí)行 offsetWidht + sudu + 2，得到新的 offsetWidth 是 401，此時 offsetWidth 值已經(jīng)超過 400，所以
這條判斷語句并沒有起到任何作用，offsetWidth 為 401，sudu 是 -1，再次計算，得到 offsetWidth 是 402，之后一直到 410，sudu 的值都是 -1，所以每次 offsetWidth 都會加 1，而當 offsetWidth 加到 411 時，sudu 變?yōu)?-2，于是 offsetWidth + sudu + 2 這步計算中，sudu 和 2 剛好抵消，offsetWidth 不再發(fā)生變化，陷入死循環(huán)。而此時 width 的值正是 offsetWidth 減 2，為 409 。
第二種情況，減到 100，同樣上截圖：
這種情況比較簡單一點，是直接 offsetWidth 減到 120 時，sudu 為 -2，同樣 sudu 與 2 抵消，offsetWidth 不再變化，陷入死循環(huán)，此時 width 的值是 118 。
總結(jié)下來，兩點，
第一，wuti.offsetWidth==juli 這句判斷條件并非萬無一失， offsetWidth 很有可能直接跳過 juli，使條件失效
第二，wuti.style.width=wuti.offsetWidth+sudu+"px" 這條計算語句，當 sudu 的值剛好為 width 和 offsetWidth 之間差值時，offsetWidth 將停止變化，陷入死循環(huán)
至于有什么好的解決辦法，我暫時也想不出來，只能說兩個模糊的方向，要么增加更多的判斷條件，將目前所發(fā)現(xiàn)的 bug 堵死，要么換一種思路，采用其他算法進行速度變化。
最后一點個人建議，發(fā)現(xiàn)你的 JS 語句結(jié)尾幾乎沒有分號，建議還是寫上分號比較好。
2017-01-13
border: 1px solid blue;
你設置了border，
wuti.offsetWidth的值就不是原來的值了，而是width+border*2