<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>多物體動畫效果</title>
????<style?type="text/css">
????*?{
????????margin:?0;
????????padding:?0;
????}
????
????ul?li?{
????????list-style:?none;
????}
????
????ul?li?{
????????width:?200px;
????????height:?100px;
????????background-color:?yellow;
????????margin-bottom:?20px;
????????border:?10px?solid?red;
????????opacity:?0.3;
????}
????</style>
<script?type="text/javascript">
????window.onload?=?function()?{
????????var?arrLi?=?document.getElementsByTagName("li");
????????for?(var?i?=?0;?i?<?arrLi.length;?i++)?{
????????????arrLi[i].onmouseover?=?function()?{
????????????????startMove(this,?{
????????????????????width:?400,
????????????????????opacity:?70,
????????????????????height:?300,
????????????????});
????????????};
????????????arrLi[i].onmouseout?=?function()?{
????????????????startMove(this,?{
????????????????????width:?200,
????????????????????opacity:?30,
????????????????????height:?100,
????????????????});
????????????};
????????}
????};
????function?startMove(obj,?json)?{
????????var?speed;
????????var?icur;
????????clearInterval(obj.timer);
????????obj.timer?=?setInterval(function()?{
????????????var?flag?=?true;
????????????for?(var?attr?in?json)?{
????????????????if?(attr?===?"opacity")?{
????????????????????icur?=?Math.round(parseFloat(getStyle(obj,?attr))?*?100);
????????????????}?else?{
????????????????????icur?=?parseInt(getStyle(obj,?attr));
????????????????}
????????????????speed?=?(json[attr]?-?icur)?/?10;
????????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
????????????????console.log("屬性"?+?attr?+?":"?+?json[attr]?+?"---icur:"?+?icur);
????????????????if?(json[attr]?!=?icur)?{
????????????????????flag?=?false;
????????????????}
????????????????if?(attr?===?"opacity")?{
????????????????????obj.style.opacity?=?(icur?+?speed)?/?100;
????????????????????//?obj.style.filter?=?"alpha(opacity:"?+?(icur?+?speed)?+?")";
????????????????}?else?{
????????????????????obj.style[attr]?=?icur?+?speed?+?"px";
????????????????}
????????????????if?(flag)?{
????????????????????clearInterval(obj.timer);
????????????????}
????????????}
????????},?30);
????}
????function?getStyle(obj,?attr)?{
????????if?(obj.currentStyle)?{
????????????return?obj.currentStyle[attr];
????????}?else?{
????????????return?getComputedStyle(obj,?null)[attr];
????????}
????}
????</script>
????</head>
<body>
????<ul>
????????<li></li>
????????<li></li>
????????<li></li>
????</ul>
</body>
</html>這段代碼執(zhí)行到for中, 有一個屬性到達(dá)了目標(biāo)值, 比如width=400, 然后這個時候for遍歷結(jié)束了, ?然后再次執(zhí)行setInterval()部分, 又遍歷for, 進(jìn)去flag剛開始是true 遇到width=400,不執(zhí)行這段代碼if (json[attr] != icur) {? ? ? ? ? ? ? ? ? ? flag = false;? ? ? ? ? ? ? ? }flag 依舊為true, 這個時候清楚interval. 請問會不會這樣需要把if (flag) {? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);? ? ? ? ? ? ? ? }這段代碼寫在for{}后嗎? ?請問該怎么解決? ?謝謝給位【碼友】
慕課網(wǎng)課程【JS動畫效果 小節(jié) 6.2完美運動框架】代碼問題請教
小新在編程
2016-08-21 21:34:34
