menu_javascript 기술을 아래로 슬라이드하고 숨기기 위해 마우스 감지를 구현하는 Node.js 메소드-JS 튜토리얼-php.cn

이 기사의 예에서는 js를 사용하여 아래로 슬라이드하고 메뉴를 숨기는 마우스 감지를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

마우스 버튼으로 끌어낼 수 있는 웹페이지 왼쪽 상단에 숨겨진 메뉴
<스타일>#D1 {
배경색: 파란색
테두리-하단: 흰색 2px 시작
테두리-왼쪽: 흰색 2px 윤곽선
테두리 오른쪽: 흰색 2px 시작
테두리 상단: 흰색 2px 윤곽선
왼쪽: 0px; 위치: 절대
상단: 0px; 숨김
너비: 300px
레이어 배경색: 연두색
}
a{글꼴 크기:9pt;색상:#000000}
a:링크{텍스트 장식:없음}
a:hover{텍스트 장식:없음;색상:#FFFFFF}
a:방문{텍스트 장식:없음}
.40pt{font-size:40pt;color:#ub39a1;font-family:Wending Amber Traditional}

<스크립트 언어="javascript">
function menuIn() //메뉴 숨김
{
          if(n4) {
                                clearTimeout(out_ID)
If( menu.top > menuH*-1 20 10 ) {
menu.top -= 8
in_ID = setTimeout("menuIn()", 1)
                }
                     else if( menu.top > menuH*-1 20 ) {
menu.top--
in_ID = setTimeout("menuIn()", 1)
                }
}
         else {
                                clearTimeout(out_ID)
If( menu.pixelTop > menuH*-1 20 10 ) {
menu.pixelTop -= 8
in_ID = setTimeout("menuIn()", 1)
                }
                      else if( menu.pixelTop > menuH*-1 20 ) {
menu.pixelTop--
in_ID = setTimeout("menuIn()", 1)
                }
}
}
function menuOut() //메뉴 표시
{
           if(n4) {
> > 클리어타임아웃(in_ID)
If( menu.top < -10) {
menu.top = 4
out_ID = setTimeout("menuOut()", 1)
                }
Else if (menu.top & lt; 0) {
메뉴.탑
                        out_ID = setTimeout("menuOut()", 1)
                }

        }
        그렇지 않으면 {
                클리어타임아웃(in_ID)
                if( menu.pixelTop < -10) {
                        menu.pixelTop = 2
                        out_ID = setTimeout("menuOut()", 1)
                }
                else if( menu.pixelTop < 0 ) {
                        menu.pixelTop
                        out_ID = setTimeout("menuOut()", 1)
                }
        }
}
함수 fireOver() {
        클리어타임아웃(F_out)
        F_over = setTimeout("menuOut()", 10)
}
함수 fireOut() {
        클리어타임아웃(F_over)
         F_out = setTimeout("menuIn()", 10)
}
함수 초기화() {
        if(n4) {
                메뉴 = document.D1
                menuH = menu.document.height
                menu.top = menu.document.height*-1 20
                menu.onmouseover = 메뉴아웃
                menu.onmouseout = 메뉴인
        menu.visibility = "표시"
        }
        else if(e4) {
                메뉴 = D1.style
                menuH = D1.offsetHeight
                D1.style.pixelTop = D1.offsetHeight*-1 20
                D1.onmouseover = fireOver
                D1.onmouseout = fireOut
                D1.style.visibility = "표시됨"
        }
}
F_over=F_out=in_ID=out_ID=null
n4 = (document.layers)?1:0
e4 = (document.all)?1:0;

M E N 유	选项 1 选项 2 选项 3 选项 4 选项 5	选项 6 选项 7 选项 8 选项 9 选项 10