js实现鼠标感应向下滑动隐藏菜单的方法
本文实例讲述了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程序设计有所帮助。
相关文章
最近一直在努力学习DOM编程这块，这是目前成就感最强烈的一块了，毕老师很认真的给我们讲解了相关知识，并在网上找了很多做的非常棒的网页作为例程给我们进行讲解2009-11-11
去除数组重复值的方法有很多，本文整理了四种不同方式，在此与大家分享下，希望对大家有所帮助2013-09-09
这篇文章主要介绍了js点击事件的执行过程,结合实例形式分析了js事件机制中的冒泡与捕获相关原理、操作技巧与注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JavaScript极简入门教程（二）：数组,本文主要讲解了数组的创建和length属性的介绍,其它方法属性都没有介绍,需要的朋友可以参考下2014-10-10
今天小编就为大家分享一篇对layer弹出框中icon数字参数的说明介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
下面小编就为大家带来一篇JS中把函数作为另一函数的参数传递方法(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了uni-app集成使用SQLite数据库的相关资料,包括勾选SQLite选项、封装sqlite.js文件以及在使用时注意的事项,文中通过图文介绍的非常详细,需要的朋友可以参考下2025-01-01
可能在大家使用JavaScript效果时，会碰到在各个浏览器中页面的显示效果不同，甚至报错，这就是代码的兼容性问题。本文就是主要介绍JavaScript的兼容性与调试技巧，希望对大家有所帮助2016-11-11
这篇文章主要为大家详细介绍了js密码强度实时检测代码，密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情，如何实现js密码强度检测，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了uniapp实现微信一键登录按钮样式，如何开发胶囊按钮的样式,需要的朋友可以参考下2024-07-07
最新评论