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

关于flag=true的问题

<!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 black;

opacity: 0.3;

filter: alpha(opacity: 30);

}

</style>

<script type="text/javascript">

window.onload = function() {

var li1 = document.getElementById("li1")

li1.onmouseover = function() {

kuan(this, {

width: 150,

height: 300,

opacity: 100

});

}

li1.onmouseout = function() {

kuan(this, {

width: 100,

height: 50,

opacity: 30

})

}

}


function kuan(wuti, tongshi, fn) {

clearInterval(wuti.dingshiqi)

wuti.dingshiqi = setInterval(function() {

for(var shuxing in tongshi) {

var zhi = 0

if(shuxing == "opacity") {

var zhi = parseInt(yangshi(wuti, shuxing) * 100)

// alert(zhi)

} else {

var zhi = parseInt(yangshi(wuti, shuxing))

// alert(shuxing)

}

var sudu = (tongshi[shuxing] - zhi) / 10

sudu = sudu > 0 ? Math.ceil(sudu) : Math.floor(sudu)

if(zhi != tongshi[shuxing]) {

if(shuxing == "opacity") {

wuti.style.filter = "alpha(opcity:'+(zhi+sudu)+')"

wuti.style[shuxing] = (zhi + sudu) / 100

} else {

wuti.style[shuxing] = zhi + sudu + "px"

}

}


if(zhi == tongshi[shuxing]) {

clearInterval()

if(fn) {

fn()

}

}

}

}, 50)


}


function yangshi(biaoqian, shuxing) {

if(biaoqian.currentStyle) {

return biaoqian.currentStyle[shuxing]

} else {

return getComputedStyle(biaoqian, false)[shuxing];

}

}

</script>

</head>


<body>

<ul>

<li id="li1"></li>

<!--<li id="li2"></li>-->

</ul>

</body>


</html>

我这里不设置flag属性的话,也能达到效果,这样子写会有什么BUG吗




正在回答

1 回答

首先你这里是没有停止计时器的:

if(zhi == tongshi[shuxing]) {
clearInterval()

要写成clearInterval(wuti.dingshiqi),当写成这样后,bug就出现了,不用flag=true,当变化的任何一个属性达到目标值后,运动停止;而不是我们需要的当所有属性达到目标值后,运动才停止

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

Hong 提问者

非常感谢!
2017-01-16 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113926    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

关于flag=true的问题

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