延迟显示子菜单方法

hoverIntent插件—实现子菜单延时显示可以防止鼠标经过时的误点击操作

<title>延时显示子菜单的方法</title>
<script type="text/javascript">
$(document).ready(function(){
        $("#demo6").hoverIntent({
            over: makeTall,
            out: makeShort,
            selector: ‘li‘,
            timeout:500
        });
    }); // close document.ready

    function makeTall(){$(this).animate({"height":75},200);}
    function makeShort(){$(this).animate({"height":50},200);}

</script>
<style type="text/css">
        ul.demo {display:block; width:100%; height:75px; padding:0; margin:0; background:#9cc; list-style-type:none;}
        ul.demo li {background:#fcc; display:block; width:25%; height:50px; padding:0; margin:0; float: left; position:relative; overflow:hidden; cursor:default;  font-size:0.9em; line-height:1.1em;}
        ul.demo li.p2 {background:#ffc;}
        ul.demo li.p3 {background:#cfc;}
        ul.demo li.p4 {background:#ccf;}
        ul.demo li span { display:block; margin:4px; background:#eef; cursor:default;}
</style>
</head>
<body>
    <div id="banner">
        <ul id="demo6" class="demo">
            <li class="p1"></li>
            <li class="p2" ></li>
            <li class="p3" ></li>
            <li class="p4"></li>
        </ul>
    </div>
</body>

下面是jquery.hoverIntent.js插件的具体实现

/*!
 * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
 * http://cherne.net/brian/resources/jquery.hoverIntent.html
 *
 * You may use hoverIntent under the terms of the MIT license. Basically that
 * means you are free to use hoverIntent as long as this header is left intact.
 * Copyright 2007, 2013 Brian Cherne
 */

/* hoverIntent is similar to jQuery‘s built-in "hover" method except that
 * instead of firing the handlerIn function immediately, hoverIntent checks
 * to see if the user‘s mouse has slowed down (beneath the sensitivity
 * threshold) before firing the event. The handlerOut function is only
 * called after a matching handlerIn.
 *
 * // basic usage ... just like .hover()
 * .hoverIntent( handlerIn, handlerOut )
 * .hoverIntent( handlerInOut )
 *
 * // basic usage ... with event delegation!
 * .hoverIntent( handlerIn, handlerOut, selector )
 * .hoverIntent( handlerInOut, selector )
 *
 * // using a basic configuration object
 * .hoverIntent( config )
 *
 * @param  handlerIn   function OR configuration object
 * @param  handlerOut  function OR selector for delegation OR undefined
 * @param  selector    selector OR undefined
 * @author Brian Cherne <brian(at)cherne(dot)net>
 */
(function($) {
    $.fn.hoverIntent = function(handlerIn,handlerOut,selector) {

        // default configuration values
        var cfg = {
            interval: 100,
            sensitivity: 7,
            timeout: 0
        };

        if ( typeof handlerIn === "object" ) {
            cfg = $.extend(cfg, handlerIn );
        } else if ($.isFunction(handlerOut)) {
            cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
        } else {
            cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
        }

        // instantiate variables
        // cX, cY = current X and Y position of mouse, updated by mousemove event
        // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
        var cX, cY, pX, pY;

        // A private function for getting mouse position
        var track = function(ev) {
            cX = ev.pageX;
            cY = ev.pageY;
        };

        // A private function for comparing current and previous mouse position
        var compare = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            // compare mouse positions to see if they‘ve crossed the threshold
            if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
                $(ob).off("mousemove.hoverIntent",track);
                // set hoverIntent state to true (so mouseOut can be called)
                ob.hoverIntent_s = 1;
                return cfg.over.apply(ob,[ev]);
            } else {
                // set previous coordinates for next time
                pX = cX; pY = cY;
                // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
                ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
            }
        };

        // A private function for delaying the mouseOut function
        var delay = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob,[ev]);
        };

        // A private function for handling mouse ‘hovering‘
        var handleHover = function(e) {
            // copy objects to be passed into t (required for event object to be passed in IE)
            var ev = jQuery.extend({},e);
            var ob = this;

            // cancel hoverIntent timer if it exists
            if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

            // if e.type == "mouseenter"
            if (e.type == "mouseenter") {
                // set "previous" X and Y position based on initial entry point
                pX = ev.pageX; pY = ev.pageY;
                // update "current" X and Y position based on mousemove
                $(ob).on("mousemove.hoverIntent",track);
                // start polling interval (self-calling timeout) to compare mouse coordinates over time
                if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

                // else e.type == "mouseleave"
            } else {
                // unbind expensive mousemove event
                $(ob).off("mousemove.hoverIntent",track);
                // if hoverIntent state is true, then call the mouseOut function after the specified delay
                if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
            }
        };

        // listen for mouseenter and mouseleave
        return this.on({‘mouseenter.hoverIntent‘:handleHover,‘mouseleave.hoverIntent‘:handleHover}, cfg.selector);
    };
})(jQuery);
时间: 2024-10-09 02:02:49

延迟显示子菜单方法的相关文章

MFC 文档view视图中根据鼠标指定的某个区域控制延迟显示tip的方法(原创)

前言 在处理文档视图中,有时候需要根据鼠标指定的位置显示相应的提示信息,对于软件功能优化设计,此功能很有必要. 一. 一般处理方法 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法.一般用法步骤: 1.添加CToolTipCtrl成员变量 m_ToolTip. 2.在父窗口中调用EnableToolTips(TRUE); 3.在窗口的OnCreate(或者其他适当的位置)中向ToolTip中

创建父窗体显示子窗体方法

#region 显示子窗体 /// <summary> /// 显示子窗体 /// </summary> /// <param name="form"></param> private void ShowForm(Form form) { foreach (Form frm in this.MdiChildren) { if (frm.Text == form.Text) { frm.Activate(); return; } } for

子菜单显示了,就不想隐藏了

今天有做一个小功能,就是mouse经过主菜单之后,子菜单就永久显示,除非刷新了网页. 先来看年实现的效果: Html代码: Source code: <div id="top"> <div id="top_1"> <ul> <li style="position:relative;"> <a href="#" id="Menu1" style="

js动态加载div显示主菜单和子菜单+jquery获取动态id

最近在做项目重构的主界面工作中,需要动态显示主菜单以及子菜单(各个界面的链接),查看原来老系统采用的是asp控件,但是重构的时候采用mvc框架,而且这些菜单并不是死的,而是通过其他界面来配置的,主菜单和子菜单都是数据库查询显示.因此,就想到了动态的拼接div来实现效果. 要实现的效果图 实现步骤: 第一步,查询主菜单名称 第二步,查询具体界面名称 第三步,更具菜单ID实现主菜单和子菜单的匹配 实现思路: 每个主菜单一个div,主菜单下的子菜单为一个整体的div,每个具体子菜单为li. 代码实现:

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单 下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><

Android中的子菜单(SubMenu)使用案例

Android中创建子菜单的步骤: 1.覆盖Activity中的onCreateOptionMenu()方法,调用Menu的addSubMenu()方法添加子菜单. 2.调用SubMenu的add方法,添加子菜单. 3.覆盖onContextItemSelected()方法,响应子菜单. 来看个小例子: package com.yangzi.submenu; import android.os.Bundle; import android.app.Activity; import android

安卓开发复习笔记——Menu菜单组件(选项菜单,上下文菜单,子菜单)

菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu).上下文菜单(ContextMenu)和子菜单(SubMenu). 菜单的实现方式有2种:一种是通过布局文件xml生成菜单,另一种是通过代码生成. 三种菜单内容有点多,不过大体相似,一次性讲完吧,本人偏好代码动态生成,下面就以代码为例. 1.选项菜单(OptionsMenu) 先来看下选项菜单的效果图:   在一个Activity界面中点击手机Menu键,在屏幕下方弹出的菜单

网页导航菜单的子菜单平铺(带背景栏)实现

- 之前给公司做的一个小型知识库管理网站时遇到一个问题,在这里记录下解决的过程. 公司的美工要求首页导航菜单 要跟他们公司的网站风格保持一致,如图所示 (子菜单是平铺的) 我一看,心想很简单嘛 先贴一下通用菜单html结构 <li>     <a href="" class="abc">热设计</a>          <ul>               <li><a href="&quo

python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法?

python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法: 原因:因为jenkins是用windows installer 安装成 windows的服务了,那么jenkins是计算机服务理的一个后台服务,所以跑cases 的时候不显示浏览器 解决办法:1.我们需要关掉jenkins后台服务,让他从cmd(dos窗口)启动,类似于tomcat的手动启动下面的方法适合不用tomcat的同学(注意,用也可以配置好Tomcat放在webapp下启