本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: 隐藏在网页左上角感应鼠标向下滑出的隐藏菜单 #D1 {<br /> BACKGROUND-COLOR: blue; <br /> BORDER-BOTTOM: white 2px outset; <br /> BORDER-LEFT: white 2px outset; <br /> BORDER-RIGHT: white 2px outset; <br /> BORDER-TOP: white 2px outset; <br /> LEFT: 0px; POSITION: absolute; <br /> TOP: 0px; VISIBILITY: hidden; <br /> WIDTH: 300px; <br /> layer-background-color: lightgreen<br /> }<br /> a{font-size:9pt;color:#000000}<br /> a:link{text-decoration:none}<br /> a:hover{text-decoration:none;color:#FFFFFF}<br /> a:visited{text-decoration:none}<br /> .40pt{font-size:40pt;color:#ub39a1;font-family:文鼎琥珀繁}<br /> <br /> function menuIn() //菜单隐藏<br /> {<br /> if(n4) {<br /> clearTimeout(out_ID)<br /> if( menu.top > menuH*-1+20+10 ) { <br /> menu.top -= 8<br /> in_ID = setTimeout("menuIn()", 1)<br /> }<br /> else if( menu.top > menuH*-1+20 ) {<br /> menu.top--<br /> in_ID = setTimeout("menuIn()", 1)<br /> }<br /> }<br /> else { <br /> clearTimeout(out_ID)<br /> if( menu.pixelTop > menuH*-1+20+10 ) {<br /> menu.pixelTop -= 8<br /> in_ID = setTimeout("menuIn()", 1) <br /> }<br /> else if( menu.pixelTop > menuH*-1+20 ) {<br /> menu.pixelTop--<br /> in_ID = setTimeout("menuIn()", 1)<br /> }<br /> }<br /> }<br /> function menuOut() //菜单显示<br /> {<br /> if(n4) {<br /> clearTimeout(in_ID)<br /> if( menu.top < -10) { <br /> menu.top += 4<br /> out_ID = setTimeout("menuOut()", 1)<br /> }<br /> else if( menu.top < 0) { <br /> menu.top++<br /> out_ID = setTimeout("menuOut()", 1)<br /> }<br /> <br /> }<br /> else { <br /> clearTimeout(in_ID)<br /> if( menu.pixelTop < -10) {<br /> menu.pixelTop += 2<br /> out_ID = setTimeout("menuOut()", 1)<br /> }<br /> else if( menu.pixelTop < 0 ) {<br /> menu.pixelTop++<br /> out_ID = setTimeout("menuOut()", 1)<br /> }<br /> }<br /> }<br /> function fireOver() { <br /> clearTimeout(F_out) <br /> F_over = setTimeout("menuOut()", 10) <br /> }<br /> function fireOut() { <br /> clearTimeout(F_over)<br /> F_out = setTimeout("menuIn()", 10)<br /> }<br /> function init() {<br /> if(n4) {<br /> menu = document.D1<br /> menuH = menu.document.height<br /> menu.top = menu.document.height*-1+20 <br /> menu.onmouseover = menuOut<br /> menu.onmouseout = menuIn<br /> menu.visibility = "visible"<br /> }<br /> else if(e4) {<br /> menu = D1.style<br /> menuH = D1.offsetHeight<br /> D1.style.pixelTop = D1.offsetHeight*-1+20<br /> D1.onmouseover = fireOver<br /> D1.onmouseout = fireOut<br /> D1.style.visibility = "visible"<br /> }<br /> }<br /> F_over=F_out=in_ID=out_ID=null<br /> n4 = (document.layers)?1:0<br /> e4 = (document.all)?1:0;<br /> M E N U 选 项 1 选 项 2 选 项 3 选 项 4 选 项 5 选 项 6 选 项 7 选 项 8 选 项 9 选 项 10 希望本文所述对大家的javascript程序设计有所帮助。
