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