1

Javascript 滑动菜单保持打开状态。clearTimeout 没有按预期工作 - 你能帮我吗

<html>
<head>
<style>
#Menu1 {position:absolute;
 top:-190px; left:150px;
 font-size:15px;visibility:visible;
 background-color:#D0BCFE;
 width:114px;z-index:0;border-style:solid;
 }
#Menu2 {position:absolute;
 top:-190px; left:580px;
 font-size:15px;visibility:visible;
 background-color:#D0BCFE;
 width:114px;z-index:0;border-style:solid;
 }
#Menu3 {position:absolute;
 top:-190px; left:1005px;
 font-size:15px;visibility:visible;
 background-color:#D0BCFE;
 width:114px;z-index:0;border-style:solid;
 }

TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;}
</style>
<script>

var stopUp=null;
var stopDown=null;
var mov=-143;
var on;

function down(id){

    if (!on){
       on=true;
       clearTimeout(stopUp)
       stopUp=null;
    }

    var obj=document.getElementById(id)
    obj.style.top=mov +"px";
    if (mov <=27){
       mov+=2;
       stopDown=setTimeout(function (){ down(id) }, 20)
    }
}

function up(id){

    if (on){
       on=false;
       clearTimeout(stopDown)
       stopDown=null; 
    }

    var obj=document.getElementById(id)
    obj.style.top=mov +"px";
    if (mov >=-143){
       mov-=2;
       stopUp=setTimeout(function(){ up(id)}, 20);
    }

}


</script>

</head>

<body leftmargin=0 marginwidth=0 topmargin=0 marginheight=0>


<div id="Menu1" onmouseover="down('Menu1')" onmouseout="up('Menu1')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>

<div id="Menu2" onmouseover="down('Menu2')" onmouseout="up('Menu2')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>

<div id="Menu3" onmouseover="down('Menu3')" onmouseout="up('Menu3')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>

<TABLE cellSpacing=0 cellPadding=0 BORDER=1 WIDTH=100%>
<TBODY>
<TR>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu1')" onmouseout="up('Menu1')">MENU 1</span>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu2')" onmouseout="up('Menu2')">MENU 2</span>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu3')" onmouseout="up('Menu3')">MENU 3</span>
</TD>
</TR>
</TBODY>
</TABLE>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<html>
<head>

编辑:当我测试它时,如果我将鼠标悬停在一个菜单上,但如果我将鼠标快速移动到几个菜单上,第一个菜单有效,但其他菜单也停止。

Menu1 {位置:绝对;

top:-190px; left:150px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}

Menu2 {位置:绝对;

top:-190px; left:580px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}

Menu3 {位置:绝对;

top:-190px; left:1005px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}

TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;}

变量停止=空;变量停止=空;变种移动=-143;变种;功能 down(id){ if (!on){ on=true; 清除超时(停止)停止=空;} var obj=document.getElementById(id) obj.style.top=mov +"px"; 如果 (mov =-143){ mov-=2; stopUp=setTimeout(function(){ up(id)}, 20); } }

网址 1
网址 2
网址 3
网址 4
网址 5
网址 6
网址 7
网址 8
网址 1
网址 2
网址 3
网址 4
网址 5
网址 6
网址 7
网址 8
网址 1
网址 2
网址 3
网址 4
网址 5
网址 6
网址 7
网址 8

菜单 1 菜单 2 菜单 3

4

2 回答 2

2

<div>的 s 不平衡。每个开场都有两个闭幕</div>

于 2011-01-05T20:13:36.043 回答
1

清除超时不会重置对象位置——因为变量mov是共享的,这将导致转换期间的操作出现问题。即使正在移动的新元素未相应对齐,您也会获得“最后一个”移动值。

可能的修复:

  1. 始终从 CSS 值中获取项目位置——这将保持每个项目的位置(这也是 jQuery 中动画的工作方式)。

  2. 为每个移动的项目保持查找(或绑定)以保持位置。虽然,我会使用前者,因为它更简单。对于下一部分(维护计时器 ID),将使用 #2 :-)

此外,您需要保持计时器运行,直到操作完成(不仅仅是发生转换)。也就是说,sharedstopUpstopDownvalues 将导致与上述 shared类似的问题mov。(这是通过 jQuery 动画队列透明地处理的)。但是,上面的#1 在这里不能很好地工作。所以,让我们探索使用#2和闭包绑定——这需要在代码中附加点击事件。

function addFlyout (elm) {
   var timerId
   elm.onmouseover = function () {
      // now can use timerId and it will only be accessible
      // to things within *this* invocation of addFlyout, including
      // inside here.
      timerId = setTimeout(function () {
         ...
         if (needToDoMore) {
           // it's easy to reference the anonymous function inside
           // with arguments.callee. alternatively, setInterval could be used
           timerId = setTimeout(arguments.callee, ...)
         }
      }, ...);
   }
   elm.onmouseout = function () {
      // ditto
   }
}
...
addFlyout(document.getElementById("Menu1"))

Jibbering JS Closure Notes包含许多有用的信息。这种方法也可以用于mov,但是,如上所述,我认为在这种情况下始终获取当前的 CSS 值会更容易。

此外,验证您的标记(避免其他浏览器胡说八道)并注意 onmouseover/out 的问题——如果移动的元素移动到处理鼠标事件的元素上(或改变其形状),则触发的事件可能会出现问题或错过

使用jQuery——或类似的跨浏览器框架——可以简化代码并轻松处理上述情况。(jQuery 甚至还内置了动画功能!)

jQuery(不使用预制系统)看起来类似于:

// get all elements to apply animation to
var elements = $("#Menu1").add("#Menu2").add("#Menu3")
elements.hover(function () { // over
  $(this).stop().animate({top: 140})
}, function () { // out
  $(this).stop().animate({top: 0})
})

猜猜我会推荐什么:-)

快乐编码。

于 2011-01-05T20:19:43.427 回答