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>