一些簡單的腳本。可以看到有什麼問題

Question

以下是帶腳本的頁面鏈接。 http://signsourceak.com/index1.html

這是我的腳本，由於某些原因，所有的功能用鼠標放在外面。誰能告訴我我的腳本有什麼問題

window.onload = sliding; 
var tags = new Array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// List of headings 
var pics = new Array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images that slide out 

function sliding(){ // assing event 
    for(var i=0; i< tags.length; i++){ 
     document.getElementById(tags[i]).onmouseover = slideout(tags[i],pics[i]); // <-- The Problem is Here Function runs with out the actual event 
     document.getElementById(tags[i]).onmouseout = slidein(tags[i],pics[i]); 
    //alert('this worked,'+ tags[i] + pics[i]); 
    } 
} 

function slideout(hid,picid){ 
    document.images[picid].style.visibility = "visible"; 
    document.images[picid].style.MozOpacity = 0.7;// need browser compatability 
    moveout(hid,picid); 
} 

function moveout(hid,picid){ 
    if(currpos(picid) > 0){ 
     document.images[picid].style.top = currpos(picid) - 1 + "px"; 
     setTimeout(moveout,10); 
    }else{ 
     clearTimeout(moveout); 
    } 

    function currpos(element){ 
     return document.getElementById(element).offsetTop; 
    } 
} 

function slidein(hid,picid){ 
    document.images[picid].style.MozOpacity = 0.5;// need browser compatability 
    movein(hid,picid); 
} 

function movein(hid,picid){ 
    if(currpos(picid) < 210){ 
     document.images[picid].style.top = currpos(picid) + 1 + "px"; 
     setTimeout(movein,10); 
    }else{ 
     clearTimeout(movein); 
     document.images[picid].style.visibility = "hidden"; 
    } 

    function currpos(element){ 
     return document.getElementById(element).offsetTop; 
    } 
} 

Answer 1

您正在將slideout（）和slidein（）的結果分配爲處理程序。您還需要隔離閉包變量;自我調用函數將確保i循環變量不被所有事件處理程序共享

function sliding(){ // assing event 
    for(var i=0; i< tags.length; i++){ 

     document.getElementById(tags[i]).onmouseover =(function(index){ 
      return function() { 
       slideout(tags[index],pics[index]); 
      } 
     })(i); 

     document.getElementById(tags[i]).onmouseout = (function(index){ 
      return function() { 
       slidein(tags[index],pics[index]); 
      } 
     })(i); 
    } 
} 

Answer 2

那不是如何使用clearTimeOut。

的setTimeout返回要傳遞給clearTimeOut定時器ID：

var timer = setTimeout(fn, 10); 
clearTimeout(timer); 

Answer 3

的一個問題是在這裏：

function sliding(){ // assing event 
    for(var i=0; i< tags.length; i++){ 
     document.getElementById(tags[i]).onmouseover = slideout(tags[i],pics[i]); // <-- The Problem is Here Function runs with out the actual event 
     document.getElementById(tags[i]).onmouseout = slidein(tags[i],pics[i]); 
    //alert('this worked,'+ tags[i] + pics[i]); 
    } 
} 

在這種循環中，你調用的 「滑出式」和「滑動」功能，但顯然這不是你想要做的。你想想要是分配一個函數，調用「滑出」或「滑入」適當的方式。要做到這一點，你需要的功能另一層：

function makeHandlers(index) { 
    return { 
    'out': function() { slideout(tags[index], pics[index]; }, 
    'in': function() { slidein(tags[index], pics[index]; } 
    }; 
} 

function sliding() { 
    for (var i = 0; i < tags.length; ++i) { 
    var handlers = makeHandlers(i), tag = document.getElementById(tags[i]); 
    tag.onmouseover = handlers.in; 
    tag.onmouseout = handlers.out; 
    } 
} 

由於@BiAiB筆記，你的電話到「的setTimeout」和「clearTimeout」需要一定的關注了。