關于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嗎
2017-01-15
首先你這里是沒有停止計時器的：
if(zhi?==?tongshi[shuxing])?{ clearInterval()要寫成clearInterval(wuti.dingshiqi)，當寫成這樣后，bug就出現了，不用flag=true，當變化的任何一個屬性達到目標值后，運動停止；而不是我們需要的當所有屬性達到目標值后，運動才停止