js实现鼠标感应向下滑动隐藏菜单的方法
本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#D1{ BACKGROUND-COLOR:blue; BORDER-BOTTOM:white2pxoutset; BORDER-LEFT:white2pxoutset; BORDER-RIGHT:white2pxoutset; BORDER-TOP:white2pxoutset; LEFT:0px;POSITION:absolute; TOP:0px;VISIBILITY:hidden; WIDTH:300px; layer-background-color:lightgreen } a{font-size:9pt;color:#000000} a:link{text-decoration:none} a:hover{text-decoration:none;color:#FFFFFF} a:visited{text-decoration:none} .40pt{font-size:40pt;color:#ub39a1;font-family:文鼎琥珀繁} </style> <scriptlanguage="javascript"> functionmenuIn()//菜单隐藏 { if(n4){ clearTimeout(out_ID) if(menu.top>menuH*-1+20+10){ menu.top-=8 in_ID=setTimeout("menuIn()",1) } elseif(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) } elseif(menu.pixelTop>menuH*-1+20){ menu.pixelTop-- in_ID=setTimeout("menuIn()",1) } } } functionmenuOut()//菜单显示 { if(n4){ clearTimeout(in_ID) if(menu.top<-10){ menu.top+=4 out_ID=setTimeout("menuOut()",1) } elseif(menu.top<0){ menu.top++ out_ID=setTimeout("menuOut()",1) } } else{ clearTimeout(in_ID) if(menu.pixelTop<-10){ menu.pixelTop+=2 out_ID=setTimeout("menuOut()",1) } elseif(menu.pixelTop<0){ menu.pixelTop++ out_ID=setTimeout("menuOut()",1) } } } functionfireOver(){ clearTimeout(F_out) F_over=setTimeout("menuOut()",10) } functionfireOut(){ clearTimeout(F_over) F_out=setTimeout("menuIn()",10) } functioninit(){ if(n4){ menu=document.D1 menuH=menu.document.height menu.top=menu.document.height*-1+20 menu.onmouseover=menuOut menu.onmouseout=menuIn menu.visibility="visible" } elseif(e4){ menu=D1.style menuH=D1.offsetHeight D1.style.pixelTop=D1.offsetHeight*-1+20 D1.onmouseover=fireOver D1.onmouseout=fireOut D1.style.visibility="visible" } } F_over=F_out=in_ID=out_ID=null n4=(document.layers)?1:0 e4=(document.all)?1:0; </script> </head>
<bodyonload="init()">
<divid="D1">
<tableborder="0"width="100%"> <TBODY> <tr> <tdalign="middle"bgColor="ub39a1"rowSpan="2"><bstyle="COLOR:ub39a1"> M<br> E<br> N<br> U</b></td> <td><br><br><ul> <li><ahref="#nogo"> 选 项1</a> </li> <li><ahref="li#nogo"> 选 项2</a> </li> <li><ahref="#nogo"> 选 项3</a> </li> <li><ahref="#nogo"> 选 项4</a> </li> <li><ahref="#nogo"> 选 项5</a> </li> </ul> </td> <td><br><br><ul> <li><ahref="#nogo"> 选 项6</a> </li> <li><ahref="#nogo"> 选 项7</a> </li> <li><ahref="#nogo"> 选 项8</a> </li> <li><ahref="#nogo"> 选 项9</a> </li> <li><ahref="#nogo"> 选 项10</a> </li> </ul> </td> </tr> <tr> <tdalign="right"colSpan="2"> </td> </tr> </TBODY> </table> </div> </body> </html>