为了账号安全,请及时绑定邮箱和手机立即绑定

关于多物体运动课程

<!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 回答

我们分两个情况,第一个情况是加到 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,先上两张截图:

http://img1.sycdn.imooc.com//58ac01350001b99504470051.jpg

我在你设置 sudu 的代码下面加了一句 console.log,用于控制台输出

http://img1.sycdn.imooc.com//58ac016500014f6a05090338.jpg

这张图是加到 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,同样上截图:

http://img1.sycdn.imooc.com//58ac031a00017e8705280299.jpg

这种情况比较简单一点,是直接 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 语句结尾几乎没有分号,建议还是写上分号比较好。

0 回复 有任何疑惑可以回复我~

border: 1px solid blue;

你设置了border,

wuti.offsetWidth的值就不是原来的值了,而是width+border*2

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于多物体运动课程

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信