本文實例講述了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 /> 否則{<br /> 清除逾時(in_ID)<br /> if(menu.pixelTop < -10) {<br /> 且選單.pixelTop = 2<br /> out_ID = setTimeout("menuOut()", 1)<br /> }<br /> else if(menu.pixelTop < 0 ) {<br /> 且選單.pixelTop <br /> out_ID = setTimeout("menuOut()", 1)<br /> }<br /> }<br /> }<br /> 函數 fireOver() { <br /> 清除逾時(F_out) <br /> F_over = setTimeout("menuOut()", 10) <br /> }<br /> 函數 fireOut() { <br /> 清除逾時(F_over)<br /> F_out = setTimeout("menuIn()", 10)<br /> }<br /> 函數 init() {<br /> 若（n4）{<br /> 選單=文檔.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 = "可見"<br /> }<br /> 否則(e4) {<br /> 選單 = 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 = "可見"<br /> }<br /> }<br /> F_over=F_out=in_ID=out_ID=null<br /> n4 = (文檔.層)?1:0<br /> e4 = (document.all)?1:0;<br /> </腳本><br /> </頭> <p><body onload="init()"> <p><div id="D1"><p><表格邊框=“0”寬度=“100％”><br /> <TBODY><br /> <tr><br /> <tdalign=“middle”bgColor=“ub39a1”rowSpan=“2”><b style=“顏色：ub39a1”><br /> M<br><br /> E<br><br /> N<br><br /> U<br /> <td> <br><br><ul><br /> <li><a href="#nogo"><br /> 選 項目 1 <br /> <br /> <li><a href="li#nogo"><br /> 選 第 2 項<br /> <br /> <li><a href="#nogo"><br /> 選 第 3 項<br /> <br /> <li><a href="#nogo"><br /> 選 第 4 項<br /> <br /> <li><a href="#nogo"><br /> 選 第 5 項<br /> <br /> <br /> <br /> <td><br><br><ul><br /> <li><a href="#nogo"><br /> 選 第 6 項<br /> <br /> <li><a href="#nogo"><br /> 選 第 7 項<br /> <br /> <li><a href="#nogo"><br /> 選 第 8 項<br /> <br /> <li><a href="#nogo"><br /> 選 第 9 項<br /> <br /> <li><a href="#nogo"><br /> 選 項目 10<br /> <br /> <br /> <br /> <br /> <tr><br /> <tdalign="right"colSpan="2"><br /> <br /> <br /> <br /> </表><br /> 身體> 希望本文對大家介紹的javascript程式設計有幫助。
