자바 스크립트 슬라이딩 메뉴가 열려 있습니다. 예상대로 작동하지 않는 사항 clearTimeout 당신이 나를 도와 줘요 - 수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>

편집 : 나는 내가 하나의 메뉴를 맴돌고 경우 근무하지만 메뉴의 몇 가지를 통해 신속하게 내 마우스를 이동 한 경우, 첫 번째 시험 할 때 하나는 작동하지만 다른 메뉴도 중지됩니다.

메뉴 1 {총수 : 절대;

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 {폰트 크기 : 20] 색상 : 레드; 총수 : 상대; Z- 색인 0; 배경색 #의 C4ABFE, 경계 스타일 : 고체; 폭 : 114px}

URL 1
URL이 URL
3
URL 4
URL 5
URL 6
URL 7
URL 8
URL 1
URL 2
URL 3
URL 4
URL 5
URL 6
URL 7
URL 8
URL 1
URL 2
URL 3
URL 4
URL 5
URL 6
URL 7
URL 8

MENU 1 MENU 2 MENU 3

출처

2011-01-05 user2105467

코드 블록이 없으면 공포가 덜 했어요. –

그건 끔찍한 일입니다. 사전 제작 된 메뉴 시스템을 사용하십시오. – Raynos

<div>의 균형이 맞지 않습니다. 모든 개봉을 처리 할 때마다 두 개의 폐점 </div>이 있습니다.

출처

2011-01-05 20:13:36

사실이며 해결해야하지만 경험 한 문제에 대해서는 중요하지 않다고 생각합니다. –

변수 mov이 공유되어 있으므로 시간 초과를 지우면 개체 위치가 다시 설정되지 않습니다 (). 전환 중에 문제가있는 작업으로 이어질 수 있습니다. 이동중인 새 요소가 그에 따라 정렬되지 않아도 "마지막"이동 값을 얻습니다.

가능한 수정 :

는 항상 CSS 값에서 항목 위치 얻을 -이 당 항목의 위치를 유지합니다 (이 jQuery를 애니메이션에 작동하는 방법도있다).
위치를 유지 관리하는 항목 이동 당 조회 (또는 바인딩)를 유지하십시오. 내가 간단하게 사용할 수 있지만 전, 사용합니다.다음의 경우 (타이머 ID를 유지) # 2는하지만 사용됩니다 :-)
또한

작업 단지 전환이 발생하지 (완료 될 때까지 실행 타이머를 유지해야합니다). 즉, stopUp 및 stopDown 값을 공유하면과 비슷한공유 문제가 발생합니다. (이것은 jQuery 애니메이션 대기열을 통해 투명하게 처리됩니다.) 그러나 위에서 # 1은 잘 작동하지 않습니다. 따라서 closure 바인딩이있는 # 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"))

The Jibbering JS Closure Notes에는 많은 유용한 정보가 포함되어 있습니다. 이 방법은 mov에도 사용할 수 있지만 위와 같이이 경우 현재 CSS 값을 얻는 것이 더 쉽다고 생각합니다.

또한 마크 업을 확인하고 (다른 브라우저를 사용하지 말고) onmouseover/out과 관련된 문제를 인식하십시오. - 마우스 이벤트를 처리하는 요소 위로 이동 한 (또는 모양을 변경 한) 경우 문제가 될 수 있습니다. 이벤트가 또는 누락 된이 발생했습니다.

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}) })

:이 비슷한을 보일 것이다 (사전 제작 시스템을 사용하지 않고)

jQuery를 (! jQuery를 심지어 내장 애니메이션 기능도 함께 제공) -)

해피 코딩.

출처

2011-01-05 20:19:43

clearTimeout이 예상대로 작동하지 않습니다.

메뉴 1 {총수 : 절대;

Menu2 {위치 : 절대;

Menu3 {위치 : 절대;

답변

관련 문제