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实现多维数组的方法
Nov 20 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
js实现文字截断功能
Sep 14 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
如何使用 vue + d3 画一棵树
Dec 03 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多个字符串替换成同一个的解决方法
2013/06/18 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python如何实现异步调用函数执行
2019/07/08 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python解析json代码实例解析
2019/11/25 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
环保口号大全
2014/06/12 职场文书
大学课外活动总结
2014/07/09 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
百万英镑观后感
2015/06/09 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang