这篇文章主要介绍了js实现鼠标感应向下滑动隐藏菜单的方法,涉及javascript操作鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
<html>
<head>
<title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title>
<style>#d1 {
background-color: blue;
border-bottom: white 2px outset;
border-left: white 2px outset;
border-right: white 2px outset;
border-top: white 2px outset;
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>
<script language=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) {
cleartimeout(in_id)
if( menu.top < -10) {
menu.top += 4
out_id = settimeout(menuout(), 1)
}
else if( 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)
}
else if( menu.pixeltop < 0 ) {
menu.pixeltop++
out_id = settimeout(menuout(), 1)
}
}
}
function fireover() {
cleartimeout(f_out)
f_over = settimeout(menuout(), 10)
}
function fireout() {
cleartimeout(f_over)
f_out = settimeout(menuin(), 10)
}
function init() {
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
}
else if(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>
<body onload=init()>
<div id=d1>
<table border=0 width=100%>
<tbody>
<tr>
<td align=middle bgcolor=ub39a1 rowspan=2><b style=color: ub39a1>
m<br>
e<br>
n<br>
u</b></td>
<td> <br><br><ul>
<li><a href=#nogo>
选 项 1</a>
</li>
<li><a href=li#nogo>
选 项 2</a>
</li>
<li><a href=#nogo>
选 项 3</a>
</li>
<li><a href=#nogo>
选 项 4</a>
</li>
<li><a href=#nogo>
选 项 5</a>
</li>
</ul>
</td>
<td><br><br><ul>
<li><a href=#nogo>
选 项 6</a>
</li>
<li><a href=#nogo>
选 项 7</a>
</li>
<li><a href=#nogo>
选 项 8</a>
</li>
<li><a href=#nogo>
选 项 9</a>
</li>
<li><a href=#nogo>
选 项 10</a>
</li>
</ul>
</td>
</tr>
<tr>
<td align=right colspan=2>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
