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

请问这个BUG是什么情况?谢谢

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

抱歉啊,前面的回答,并没有解决你的问题,又看了下代码,发现问题就在 你把速度固定了,也就是当 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,就自然停止了


2 回复 有任何疑惑可以回复我~
#1

飞天意大利面神兽 提问者

非常感谢你的耐心回答!imooc有你们真棒!
2016-07-05 回复 有任何疑惑可以回复我~

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)

}



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

补充,要有 mouseout 事件,恢复原状,不然 你这个东西,下次mouseover 触发 又停止不了了

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

飞天意大利面神兽 提问者

能帮我看看这个嘛?http://www.imooc.com/qadetail/150163
2016-07-08 回复 有任何疑惑可以回复我~

把  flag = true; 放到 定时器 中,就可以了

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

飞天意大利面神兽 提问者

不行,width和height都达不到目标值,然后鼠标再放进去就会无限放大。
2016-07-05 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

请问这个BUG是什么情况?谢谢

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