关于flag=true的问题
Hong
2017-01-14 22:57
<!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回答
-
- stone310
- 2017-01-15 23:43:05
首先你这里是没有停止计时器的：
if(zhi == tongshi[shuxing]) { clearInterval()要写成clearInterval(wuti.dingshiqi)，当写成这样后，bug就出现了，不用flag=true，当变化的任何一个属性达到目标值后，运动停止；而不是我们需要的当所有属性达到目标值后，运动才停止
JS动画效果
113925 学习 · 1443 问题
相似问题