请问，这BUG是怎么回事？http://www.imooc.com/video/3049
来源：4-2 获取样式
飞天意大利面神兽
2016-07-02 13:47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.lis {
height: 60px;
width: 260px;
background-color: antiquewhite;
border-radius: 60px;
margin-top: 10px;
line-height: 60px;
text-align: center;
border: 5px solid cadetblue;
}
</style>
<script type="text/javascript">
function getclsname(clsname, parent) {
var oparent = parent ? document.getElementById(parent) : document,
eles = [],
elements = oparent.getElementsByTagName("*");
for (var i = 0, l = elements.length; i < l; i++) {
if (elements[i].className == clsname) {
eles.push(elements[i]);
}
}
return eles;
}
window.onload = function() {
var lis = getclsname("lis", "oul"),
speed = 10;
for (var i = 0, l = lis.length; i < l; i++) {
this.timer=null;
lis[i].onmouseover = function() {
lis_over(this, speed, 0, 500);
}
lis[i].onmouseleave = function() {
lis_over(this, speed, 1, 260);
}
}
}
function lis_over(obj, speed, lg, itg) {
lis_style=window.getComputedStyle(obj,null),
wd=lis_style.width;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (parseInt(wd) == itg) {
clearInterval(obj.timer);
} else {
if (lg != 0) {
speed = -10;
}
obj.style.width = parseInt(wd) + speed + "px";
}
}, 50)
document.title=parseInt(wd);
}
</script>
</head>
<body>
<ul id=oul>
<li class="lis">imooc</li>
<li class="lis"></li>
<li class="lis"></li>
<li class="lis"></li>
<li class="lis"></li>
<li class="lis"></li>
</ul>
</body>
</html>
如上代码，非常感谢！
写回答
关注
1回答
-
- once829
- 2016-07-04 09:32:49
var lis_style=window.getComputedStyle(obj,null),
wd=lis_style.width;
定义变量要放在定时器内部。放在外部的话，第一次传入定时器内的wd值为260，再一次执行定时器不会重新上诉代码，因此wd的值始终为260，所以效果显示出来就是停在了宽度为270的地方。
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113910 学习 · 1502 问题
相似问题