這篇文章主要介紹了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程序設計有所幫助。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
