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 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
php实现微信模板消息推送
2018/03/30 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
python实现点对点聊天程序
2018/07/28 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
python中time包实例详解
2021/02/02 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
项目经理的岗位职责
2013/11/23 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
端午节活动策划方案
2014/03/09 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
欢迎横幅标语
2014/06/17 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python