obj.timer問題
當(dāng)我為多個li用for循環(huán)設(shè)置相同鏈?zhǔn)竭\動時,firebug提示
JS代碼如下:
/* *?@Author:?Marte *?@Date:???2016-10-30?21:31:35 *?@Last?Modified?by:???Marte *?@Last?Modified?time:?2016-11-01?10:01:40 */ 'use?strict'; /* *?@Author:?Marte *?@Date:???2016-10-30?13:06:56 *?@Last?Modified?by:???Marte *?@Last?Modified?time:?2016-10-30?19:25:29 */ 'use?strict'; window.onload=function??()?{ ????var?oLi=document.getElementsByTagName("li"); ????//鼠標(biāo)移入 ????for?(var?i?=?0;?i?<?oLi.length;?i++)?{ ????????oLi[i].timer=null;???????????????????????//給每個li加定時器 ????????oLi[i].onmouseover=function?()?{ ????????????startMove(this,"width",400,function??()?{ ????????????????startMove(this,"height",160); ????????????}); ????????} ????}; ????//鼠標(biāo)移出 ????for?(var?i?=?0;?i?<?oLi.length;?i++)?{ ????????oLi[i].timer=null;??????????????????????//給每個li加定時器 ????????oLi[i].onmouseout=function??()?{ ????????????startMove(this,"height",80); ????????} ????}; }; //筆記:獲取樣式屬性,解決offsetWidth指的是包括邊框?qū)挾鹊膯栴} function?getStyle?(obj,attr)?{ ????if?(obj.currentStyle)?{ ????????return?obj.currentStyle[attr];?????????//IE瀏覽器 ????}?else{ ????????return?getComputedStyle(obj,false)[attr];?????//火狐瀏覽器 ????}; } //定義動畫框架 function?startMove?(obj,attr,iTarget,fun)?{ ????var?oLi=document.getElementsByTagName("li"); ????clearInterval(obj.timer);?????????????????????????????//清除計時器 ????obj.timer=setInterval(function?()?{ ????????var?icur=0; ????????if?(attr=="opacity")?{??????????????????????//加if處理透明度問題 ????????????//透明度有時是小數(shù),乘100符合習(xí)慣整數(shù)寫法,使用Math.round()處理計算機不能準(zhǔn)確存儲小數(shù)問題,例如:計算機中0.07*100=7.000000001 ????????????icur=Math.round(parseFloat(getStyle(obj,attr))*100); ????????}?else{ ????????????icur=parseInt(getStyle(obj,attr)); ????????}; ????????var?speed=(iTarget-icur)/10;???????//使其速度和到終點距離關(guān)聯(lián),實現(xiàn)緩沖運動 ????????//解決上面方法中導(dǎo)致最后一點距離不對的問題(iTarget-oMain.offsetLeft)/10;最后不是iTarget ????????speed=speed>0?Math.ceil(speed):Math.floor(speed); ????????if?(icur==iTarget)?{ ????????????clearInterval(obj.timer); ????????????if(fun){ ????????????????fun(); ????????????} ????????}else{??????????????????????????????????//必須加else,不然不能同時執(zhí)行下面語句 ????????//obj.style.width改寫成obj.style["width"],是為了是屬性可以變成可以傳入的參數(shù) ????????????if?(attr=="opacity")?{??????????????????//加if處理透明度問題 ????????????????obj.style.filter="alpha(opacity:"+(icur+speed)+")";?//IE瀏覽器 ????????????????obj.style.opacity=(icur+speed)/100;?????//火狐瀏覽器 ????????????}?else{ ????????????????obj.style[attr]=icur+speed+"px";????????//透明度有bug ????????????} ????????} ????},30) }
我也試過把回調(diào)函數(shù)放到for循環(huán)執(zhí)行,并加oLi.timer=null;還是不可以……
拜托大神解答,手動微笑《·-·》;
2016-11-01
window.onload下第一段for