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 this用法小结
Dec 19 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
Javascript复制实例详解
2016/01/28 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
spyder常用快捷键(分享)
2017/07/19 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
经典c++面试题四
2015/05/14 面试题
中华在我心中演讲稿
2014/09/13 职场文书
介绍信的格式
2015/01/30 职场文书
房产证明范本
2015/06/19 职场文书
天气温馨提示语
2015/07/14 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python