js實現(xiàn)鼠標感應向下滑動隱藏菜單的方法
本文實例講述了js實現(xiàn)鼠標感應向下滑動隱藏菜單的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<html>
<head>
<title>隱藏在網(wǎng)頁左上角感應鼠標向下滑出的隱藏菜單</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程序設計有所幫助。
相關文章
最近一直在努力學習DOM編程這塊，這是目前成就感最強烈的一塊了，畢老師很認真的給我們講解了相關知識，并在網(wǎng)上找了很多做的非常棒的網(wǎng)頁作為例程給我們進行講解2009-11-11
去除數(shù)組重復值的方法有很多，本文整理了四種不同方式，在此與大家分享下，希望對大家有所幫助2013-09-09
這篇文章主要介紹了js點擊事件的執(zhí)行過程,結合實例形式分析了js事件機制中的冒泡與捕獲相關原理、操作技巧與注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JavaScript極簡入門教程（二）：數(shù)組,本文主要講解了數(shù)組的創(chuàng)建和length屬性的介紹,其它方法屬性都沒有介紹,需要的朋友可以參考下2014-10-10
對layer彈出框中icon數(shù)字參數(shù)的說明介紹
今天小編就為大家分享一篇對layer彈出框中icon數(shù)字參數(shù)的說明介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS中把函數(shù)作為另一函數(shù)的參數(shù)傳遞方法(總結)
下面小編就為大家?guī)硪黄狫S中把函數(shù)作為另一函數(shù)的參數(shù)傳遞方法(總結)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
uni-app集成使用SQLite數(shù)據(jù)庫的方法步驟
這篇文章主要介紹了uni-app集成使用SQLite數(shù)據(jù)庫的相關資料,包括勾選SQLite選項、封裝sqlite.js文件以及在使用時注意的事項,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2025-01-01
可能在大家使用JavaScript效果時，會碰到在各個瀏覽器中頁面的顯示效果不同，甚至報錯，這就是代碼的兼容性問題。本文就是主要介紹JavaScript的兼容性與調(diào)試技巧，希望對大家有所幫助2016-11-11
這篇文章主要為大家詳細介紹了js密碼強度實時檢測代碼，密碼強度的判斷, 在注冊網(wǎng)站用戶的時候, 是一個必須要做的事情，如何實現(xiàn)js密碼強度檢測，感興趣的小伙伴們可以參考一下2016-03-03
uniapp實現(xiàn)微信一鍵登錄按鈕樣式(膠囊按鈕的樣式)
這篇文章主要介紹了uniapp實現(xiàn)微信一鍵登錄按鈕樣式，如何開發(fā)膠囊按鈕的樣式,需要的朋友可以參考下2024-07-07