obj.timer問題
當我為多個li用for循環設置相同鏈式運動時，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");
????//鼠標移入
????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);
????????????});
????????}
????};
????//鼠標移出
????for?(var?i?=?0;?i?<?oLi.length;?i++)?{
????????oLi[i].timer=null;??????????????????????//給每個li加定時器
????????oLi[i].onmouseout=function??()?{
????????????startMove(this,"height",80);
????????}
????};
};
//筆記：獲取樣式屬性，解決offsetWidth指的是包括邊框寬度的問題
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處理透明度問題
????????????//透明度有時是小數,乘100符合習慣整數寫法，使用Math.round()處理計算機不能準確存儲小數問題，例如:計算機中0.07*100=7.000000001
????????????icur=Math.round(parseFloat(getStyle(obj,attr))*100);
????????}?else{
????????????icur=parseInt(getStyle(obj,attr));
????????};
????????var?speed=(iTarget-icur)/10;???????//使其速度和到終點距離關聯，實現緩沖運動
????????//解決上面方法中導致最后一點距離不對的問題(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，不然不能同時執行下面語句
????????//obj.style.width改寫成obj.style["width"]，是為了是屬性可以變成可以傳入的參數
????????????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)
}我也試過把回調函數放到for循環執行，并加oLi.timer=null;還是不可以……
拜托大神解答，手動微笑《·-·》；
2016-11-01
window.onload下第一段for
for?(var?i?=?0;?i?<?oLi.length;?i++)?{ ????oLi[i].timer=null;???????????????????????//給每個li加定時器 ????oLi[i].onmouseover=function?()?{ ????????var?self=this;??????????????????????????????????//保存當前this ????????startMove(this,"width",400,function??()?{ ????????????startMove(self,"height",160);????????????????????//this要換成self ????????}); ????} };