1 function animate1(obj,data,rate,fn){//運動對象，運動數據，[運動速度]，[回調函數]2 ? ? //遍歷獲取樣式屬性3 ? ? for(var key in data){4 ? ? ? ? //通過閉包將key私有化5 ? ? ? ? (function(k){6 ? ? ? ? ? ? /*7 ? ? ? ? ? ? ? ? 獲得樣式寬高等會帶有單位px需要處理掉，8 ? ? ? ? ? ? ? ? 如果使用parseInt，當傳入opacity為小數時會變為0，所以使用parseFloat9 ? ? ? ? ? ? */10 ? ? ? ? ? ? var cur = parseFloat( (obj.currentStyle || getComputedStyle(obj,null) )[k]);1112 ? ? ? ? ? ? //對特殊值進行處理13 ? ? ? ? ? ? if(k == "opacity"){14 ? ? ? ? ? ? ? ? //透明度當前值和目標值放大100倍，防止小數被舍去15 ? ? ? ? ? ? ? ? cur *= 100;16 ? ? ? ? ? ? ? ? data[k] *= 100;17 ? ? ? ? ? ? }1819 ? ? ? ? ? ? //當前值和目標值相等，直接返回20 ? ? ? ? ? ? if(cur == data[k]){ return; }2122 ? ? ? ? ? ? //通過自身名字定義定時器,解決每個運動共用一個定時器，造成清除其他運動定時器的問題23 ? ? ? ? ? ? clearInterval(obj[k +'timer']);2425 ? ? ? ? ? ? obj[k+'timer'] = setInterval(function(){2627 ? ? ? ? ? ? ? ? //當前 += （目標-當前）*比率 ?比率不傳則默認0.228 ? ? ? ? ? ? ? ? cur += (data[k] - cur) * (rate || 0.2);2930 ? ? ? ? ? ? ? ? if(Math.round(cur) == data[k]){31 ? ? ? ? ? ? ? ? ? ? //如果到達目標值清除定時器,同步數據32 ? ? ? ? ? ? ? ? ? ? clearInterval(obj[k+'timer']);33 ? ? ? ? ? ? ? ? ? ? cur=data[k];3435 ? ? ? ? ? ? ? ? ? ? //回調，將定時器賦值為0，遍歷每個定時器的值相加，如果所有定時器相加都為0，說明運動已經全部完成，執行回調函數36 ? ? ? ? ? ? ? ? ? ? obj[k + "timer"] = 0;37 ? ? ? ? ? ? ? ? ? ? var bl = 0;38 ? ? ? ? ? ? ? ? ? ? for(var key in data){39 ? ? ? ? ? ? ? ? ? ? ? ? bl += obj[key + "timer"];40 ? ? ? ? ? ? ? ? ? ? }41 ? ? ? ? ? ? ? ? ? ? if(bl == 0){42 ? ? ? ? ? ? ? ? ? ? ? ? //判斷是否傳入回調函數43 ? ? ? ? ? ? ? ? ? ? ? ? fn && fn.call(obj);44 ? ? ? ? ? ? ? ? ? ? } ? ?//?。。。。。。?！這里的fn&&fn.call(obj) 不懂，返回的是false的fn或fn.call(obj)還是布爾值false？45 ? ? ? ? ? ? ? ? }4647 ? ? ? ? ? ? ? ? //使用數據時判斷特殊值48 ? ? ? ? ? ? ? ? if(k == "opacity"){49 ? ? ? ? ? ? ? ? ? ? //opacity具有兼容問題，ie8以下使用filter:alpha(opacity:100)50 ? ? ? ? ? ? ? ? ? ? obj.style.opacity = cur / 100;51 ? ? ? ? ? ? ? ? ? ? obj.style.filter = "alpha(opacity="+ cur +")";52 ? ? ? ? ? ? ? ? }else{53 ? ? ? ? ? ? ? ? ? ? obj.style[k] = cur + "px";54 ? ? ? ? ? ? ? ? }55 ? ? ? ? ? ? },30)56 ? ? ? ? })(key);57 ? ? }58 }