[英]Some what simple script. Can see what's wrong
Here is the link to the page with the script. 这是带有脚本的页面链接。 http://signsourceak.com/index1.html
http://signsourceak.com/index1.html
Here is my script and for some reasons all the functions fire with out mouse over. 这是我的脚本,由于某些原因,所有功能都可以在没有鼠标悬停的情况下启动。 Can anyone tell me what is wrong with my script
谁能告诉我我的脚本出了什么问题
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;
}
}
that is not how to use clearTimeOut. 那不是如何使用clearTimeOut的。
setTimeout returns a timer id that have to be passed to clearTimeOut: setTimeout返回必须传递给clearTimeOut的计时器ID:
var timer = setTimeout( fn, 10 );
clearTimeout( timer);
You are assigning the result of slideout() and slidein() as the handlers. 您正在将slideout()和slidein()的结果分配为处理程序。 You also need to isolate the closure variables;
您还需要隔离闭包变量。 self calling functions will make sure the the i looping variable is not shared by all the event handlers
自调用函数将确保所有事件处理程序都不共享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);
}
}
One problem is here: 一个问题在这里:
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]);
}
}
In that loop, you're calling the "slideout" and "slidein" functions, though it's obvious that that's not what you want to do. 在该循环中,您正在调用 “ slideout”和“ slidein”函数,尽管很明显,这不是您想要的。 What you want is to assign a function that calls "slideout" or "slidein" the appropriate way.
您想要的是分配一个以适当方式调用“ slideout”或“ slidein”的函数。 To do that, you'll need another layer of function:
为此,您需要另一层功能:
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;
}
}
As @BiAiB notes, your calls to "setTimeout" and "clearTimeout" need some attention too. 正如@BiAiB指出的那样,您对“ setTimeout”和“ clearTimeout”的调用也需要引起注意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.