menu_javascript 기술을 아래로 슬라이드하고 숨기기 위해 마우스 감지를 구현하는 Node.js 메소드
- WBOY원래의
- 2016-05-16 16:13:361182검색
이 기사의 예에서는 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 유 | |
|