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程序设计有所帮助。

赞 (0)

相关推荐

  • js插件dropload上拉下滑加载数据实例解析

    js插件dropload上拉下滑加载数据实例解析

    本文实例为大家分享了dropload插件上拉下滑加载数据的具体代码,供大家参考,具体内容如下 效果图: 1.导入js  dropload.min.js  zepto.min.js    <!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 --> 2.后台查询 /** * 我找的劵 * * @return */ @Action("IFindTicket") public String IFindTicket() { try { FuTransactio

  • Listloading.js移动端上拉下拉刷新组件

    Listloading.js移动端上拉下拉刷新组件

    listloading是一个移动端的上拉.下拉加载更多的组件.主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在.如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦.listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll

  • JS实现网页顶部向下滑出的全国城市切换导航效果

    JS实现网页顶部向下滑出的全国城市切换导航效果

    本文实例讲述了JS实现网页顶部向下滑出的全国城市切换导航效果.分享给大家供大家参考.具体如下: 这是一款JS版网页顶部向下滑出的城市切换导航,仿sohu团购网页顶部的城市导航切换,从顶部向下滑出,方便在其他城市之间切换.使用了sohu网原版的一个JS封装插件来实现,目前只是为了演示,所以全国城市不全,使用者自己添加吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-scroll-city-cha-style-codes/ 具体代码

  • JS实现移动端判断上拉和下滑功能

    一.手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑. 二.js中距离:pageY.clientY.offsetY的区别: offsetY:相对于父节点的偏移距离. clientY:相对于浏览器,滚轮距离不算在内. pageY:相对于浏览器,滚轮滚动的距离算在内:本例中,用pageY,触屏时记录位置-startY,结束时记录-endY,两个相减以正负判断是上移还是下滑. 三.touchstart有touches属性,touchend有changedTouc

  • 基于JavaScript实现鼠标向下滑动加载div的代码

    废话不多说了,关键代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new

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

    本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#D1 {     BACKGROUND-COLOR: blue;     BORDER-BOTTOM: white 2px outset;     BORDER-LEFT: white 2px outset;   

  • JS实现具备延时功能的滑动门菜单效果

    JS实现具备延时功能的滑动门菜单效果

    本文实例讲述了JS实现具备延时功能的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/ 具体代码如下: <!DOCTYP

  • js实现鼠标感应图片展示的方法

    本文实例讲述了js实现鼠标感应图片展示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • js实现鼠标点击左上角滑动菜单效果代码

    js实现鼠标点击左上角滑动菜单效果代码

    本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • JS实现鼠标点击展开或隐藏表格行的方法

    本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • 基于jQuery实现的向下滑动二级菜单效果代码

    基于jQuery实现的向下滑动二级菜单效果代码

    本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • JS实现鼠标滑过折叠与展开菜单效果代码

    JS实现鼠标滑过折叠与展开菜单效果代码

    本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果.本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC

  • JS实现点击链接切换显示隐藏内容的方法

    JS实现点击链接切换显示隐藏内容的方法

    本文实例讲述了JS实现点击链接切换显示隐藏内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer

  • js判断鼠标位置是否在某个div中的方法

    本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在

  • JS实现鼠标箭头变成一个燃烧烛光效果的方法

    本文实例讲述了JS实现鼠标箭头变成一个燃烧烛光效果的方法.分享给大家供大家参考.具体如下: 这是一个完全的鼠标箭头美化效果的JS代码,通过这个JS代码,把鼠标的箭头加上一个样式,燃烧中的蜡烛.这个也是很古老的代码了,只能在IE8及以下浏览器运行,代码如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

随机推荐