关于多物体运动课程
Hong
2017-01-13 13:03
<!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这个值是怎么算出来的有没有大神告诉我
说的明白的立即采纳，随时在线
2回答
-
- 慕粉3951534
- 2017-02-21 17:15:16
我们分两个情况，第一个情况是加到 400 的时候，第二个情况是减到 100 。
在此之前，我们把下面这句代码转化一下：
wuti.style.width=wuti.offsetWidth+sudu+"px"
你也知道，当前 wuti.offsetWidth = wuti.style.width + 2，当然这只是说明意思，实际中不能这样等，那么把这个等式代入上面的代码中，将 wuti.style.width 替换掉：
wuti.offsetWidth = wuti.offsetWidth + sudu + 2 + "px"
这是内部实际发生的变化，这里作说明用，offsetWidth 是只读变量，不能直接修改。
下面讨论第一种情况，加到 400，先上两张截图：
我在你设置 sudu 的代码下面加了一句 console.log，用于控制台输出
这张图是加到 411 的异常情况，可以看到，最后一条输出已经 3840 次，也就是说进了死循环。
先看 offsetWidth 为 398 时，sudu 是 1，执行 offsetWidht + sudu + 2，得到新的 offsetWidth 是 401，此时 offsetWidth 值已经超过 400，所以
if(wuti.offsetWidth==juli)
这条判断语句并没有起到任何作用，offsetWidth 为 401，sudu 是 -1，再次计算，得到 offsetWidth 是 402，之后一直到 410，sudu 的值都是 -1，所以每次 offsetWidth 都会加 1，而当 offsetWidth 加到 411 时，sudu 变为 -2，于是 offsetWidth + sudu + 2 这步计算中，sudu 和 2 刚好抵消，offsetWidth 不再发生变化，陷入死循环。而此时 width 的值正是 offsetWidth 减 2，为 409 。
第二种情况，减到 100，同样上截图：
这种情况比较简单一点，是直接 offsetWidth 减到 120 时，sudu 为 -2，同样 sudu 与 2 抵消，offsetWidth 不再变化，陷入死循环，此时 width 的值是 118 。
总结下来，两点，
第一，wuti.offsetWidth==juli 这句判断条件并非万无一失， offsetWidth 很有可能直接跳过 juli，使条件失效
第二，wuti.style.width=wuti.offsetWidth+sudu+"px" 这条计算语句，当 sudu 的值刚好为 width 和 offsetWidth 之间差值时，offsetWidth 将停止变化，陷入死循环
至于有什么好的解决办法，我暂时也想不出来，只能说两个模糊的方向，要么增加更多的判断条件，将目前所发现的 bug 堵死，要么换一种思路，采用其他算法进行速度变化。
最后一点个人建议，发现你的 JS 语句结尾几乎没有分号，建议还是写上分号比较好。
-
- 仲系xbb
- 2017-01-13 15:49:15
border: 1px solid blue;
你设置了border，
wuti.offsetWidth的值就不是原来的值了，而是width+border*2
JS动画效果
113923 学习 · 1443 问题
相似问题