请问这个BUG是什么情况？http://www.imooc.com/video/2879
来源：2-1 JS速度动画
飞天意大利面神兽
2016-07-01 15:03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#divs {
height: 260px;
width: 160px;
background-color: antiquewhite;
border-radius: 10px;
position: relative;
left: -160px;
}
#spans {
height: 100px;
width: 20px;
background-color: cornflowerblue;
border-radius: 5px;
position: absolute;
left: 160px;
margin-left: 1px;
box-shadow: 5px 2px 10px cornflowerblue;
border: 1px solid white;
}
#div_opacity {
height: 100px;
width: 100px;
background-color: brown;
border-radius: 100px;
box-shadow: 5px 2px 10px #A52A2A;
border: 1px solid white;
opacity: 0.1;
}
</style>
<script type="text/javascript">
window.onload = function() {
var div = document.getElementById("divs"),
span = document.getElementById("spans"),
div_o = document.getElementById("div_opacity");
var speed = 5;
div.onmouseover = function() {
star_1(speed, div, 0);
}
div.onmouseleave = function() {
star_1(speed, div, -160);
}
}
var timer = null;
function star_1(speed, div, itarget) {
clearInterval(timer);
timer = setInterval(function() {
if (div.offsetLeft == itarget) {
clearInterval(timer);
} else {
if (itarget == 0) {
speed = speed;
} else if (itarget<0) {
speed = -speed;
}
if (div.offsetLeft > -160 / 2) {
speed = speed * 3;
} else {
speed = speed;
}
div.style.left = div.offsetLeft + speed + "px";
//解决抖动
if (div.offsetLeft > 0) {
clearInterval(timer);
div.style.left = "0px";
}
if (div.offsetLeft < -160) {
clearInterval(timer);
div.style.left = "-160px";
}
}
}, 50)
}
</script>
</head>
<body>
<div id="divs"><span id="spans">分享</span></div>
<div id="div_opacity"></div>
</body>
</html>在代码的第68行，”speed=-speed“，当onmouseleave事件触发，div就会不停弹跳。
如果是改成”speed=-5“就不会出错，请问这是发生了啥？蟹蟹
写回答
关注
2回答
-
- 右下角_
- 2016-07-01 17:39:03
问题出现当 触发onmouseleave 时，传入speed=5，而star_1 中的局部变量speed=5，由于itarget=-160<0，所以，speed=-speed，即此时局部变量speed=-5，而下一个50ms，由于itarget=-160<0不变，继续执行speed=-speed，即此时局部变量speed=5了，到此发现问题了，在定时器的作用下，speed会在5与-5之间来回变动，有没有达到任何 你设置的 停止条件，就出现了 无限制的抖动。而如果speed=-5，固定值 就不会出现 负负得正的情况了
-
- bingovhh
- 2016-07-01 17:54:20
speed=-speed这么写容易乱，你的目的大概是简单的变换一下符号，第一次进这个语句speed由5变为-5，下面*3之后变为-15，当第二次执行这个语句的时候speed就会由-15变为15，这样问题就出来了。建议你传参数的时候参数名和局部变量名不要相同。
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113924 学习 · 1443 问题
相似问题