js实现鼠标感应向下滑动隐藏菜单的方法


Posted in Javascript onFebruary 20, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript读取xml
Nov 04 Javascript
jquery实用代码片段集合
Aug 12 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
React中的refs的使用教程
Feb 13 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 #Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 #Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 #Javascript
JQuery实现展开关闭层的方法
Feb 17 #Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 #Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 #Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 #Javascript
You might like
PHP 身份证号验证函数
2009/05/07 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
会计电算化专业毕业生自荐信
2013/12/20 职场文书
就业协议书的作用
2014/04/11 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
十周年庆典策划方案
2014/06/03 职场文书
分公司任命书
2014/06/06 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
博士给导师的自荐信
2015/03/06 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
golang json数组拼接的实例
2021/04/28 Golang
MySQL日期时间函数知识汇总
2022/03/17 MySQL
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers