请问这个BUG是什么情况？谢谢
飞天意大利面神兽
2016-07-05 15:47
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>json</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.lis {
height: 260px;
width: 260px;
background-color: antiquewhite;
border-radius: 60px;
margin-top: 10px;
line-height: 60px;
text-align: center;
border: 5px solid cadetblue;
opacity: 0.5;
box-shadow: 5px 2px 10px darkred;
}
</style>
<script src="speed_flash/donghua.js"></script>
<script type="text/javascript">
window.onload=function(){
var oli=document.getElementById("lis");
oli.onmouseover=function(){
lis_over(oli,10,0,{width:400,height:460});
}
}
</script>
</head>
<body>
<ul id=oul>
<li class="lis" id="lis">imooc</li>
</ul>
</body>
</html>function lis_over(obj, speed, lg, json, fn) {
obj.timer = null;
var sp = 10,
flag = true;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
for (var sty in json) {
//样式值处理
var wd = window.getComputedStyle(obj, null)[sty];
if (sty == 'opacity') {
wd = Math.round(parseFloat(wd) * 100)/100;
} else {
wd = parseInt(wd);
}
//判断结束
if (wd != json[sty]) {
flag = false;
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
//速度正负判断
if (lg != 0) {
speed = -10;
}
//透明度
if (sty == 'opacity') {
var a = wd*100 + speed;
obj.style[sty] = a / 100;
} else {
obj.style[sty] = wd + speed + "px";
}
}
}, 100)
}谢谢！我是希望能够同时运动，然后等大家运动到达目的地才结束！
4回答
-
- 右下角_
- 2016-07-05 18:01:38
抱歉啊，前面的回答，并没有解决你的问题，又看了下代码，发现问题就在 你把速度固定了，也就是当 width达到目标值400的时候，而height此时400 并没有达到目标值，定时器不会停止，下一次 而width的值就变成了410，大于了width的目标值400，而当 height达到目标值时，width的值也在逐渐增大，早就超出了目标值的400，这样就永远不会停止了，也就是说除非 width同时达到目标值，例如lis_over(oli,10,0,{width:400,height:400});否则都不会停止。这也是 老师在代码中 var speed = (json[sty]-wd)/8;用目标值 减去现在值，当二者相同时 speed就变成了0，不在增加或减少，等待其他 属性 达到目标值 速度变为0，就自然停止了
-
- 右下角_
- 2016-07-05 17:43:49
function lis_over(obj, speed, lg, json, fn) {
obj.timer = null;
var sp = 10,
flag = true;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
flag = true;
for (var sty in json) {
//样式值处理
var wd = window.getComputedStyle(obj, false)[sty];
if (sty == 'opacity') {
wd = Math.round(parseFloat(wd)*100);
} else {
wd = parseInt(wd);
}
var speed = (json[sty]-wd)/8;
speed = speed >0 ?Math.ceil(speed):Math.floor(speed);
//判断结束
//console.log('sty:'+sty+';wd:'+wd+';sty:'+json[sty]);
if (wd != json[sty]) {
console.log(flag);
flag = false;
}
// 速度正负判断
if (lg != 0) {
speed = -speed;
}
//透明度
if (sty == 'opacity') {
obj.style[sty] = (wd + speed) / 100;
} else {
obj.style[sty] = wd + speed + "px";
}
}
// console.log(flag);
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 100)
}
-
- 右下角_
- 2016-07-05 17:11:27
补充，要有 mouseout 事件，恢复原状，不然 你这个东西，下次mouseover 触发 又停止不了了
-
- 右下角_
- 2016-07-05 17:08:53
把 flag = true; 放到 定时器 中，就可以了
JS动画效果
113924 学习 · 1443 问题
相似问题