zoukankan      html  css  js  c++  java
  • 分享一个jquery插件,弥补一下hover事件的小小不足

    hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件

    应该设置一个时差来控制hover事件的触发

    比如jd左边的菜单 你用鼠标瞬间划过他子菜单会弹出然后立即消失, 用户体验非常的不好.

    易迅的菜单就没有这个问题

    delayHover来解决这个问题

    啥也不说了先看调用…………………………

    调用方式:

    var duration = 500;// 延迟500毫秒
    
    $('#div1').delayHover(function () {
         $(this).css('background', '#ccc');
    }, function () {
         $(this).css('background', '#000');
    }, duration)

    duration表示延迟多少时间来触发hover事件

    实现原理

    设置一个定时器来开启hover事件

    上代码

    $.fn.delayHover = function (fnOver, fnOuter, duration) {
        var _this = this
        var timerOut; //开启hover的定时器
        $(this).hover(function () {
            timerOut = setTimeout(function () {
                fnOver.call(_this);
            }, duration)
        }, function () {
            clearTimeout(timerOut)
            fnOuter.call(_this);;
        })
    }

    fnOver开启一个定时器

    fnOuter关闭定时器

    bug修复:

    1.fnOuter每次都会执行(即使fnOver不执行)

    2.duration对传入的值进行安全监测

    ; (function ($) {
    
        $.fn.delayHover = function (fnOver, fnOut, duration) {
            var _this = this;
            var timeouter;
            var defaultDuration = 500;//默认500 毫秒
            var fnOver_Running = false;  //函数已经执行
    
            //重置duration
            if (typeof duration != "number" ||//不是字符串
                isNaN(duration) || //NaN
                duration < 0) { //非法值
    
                duration = defaultDuration;
            }
    
            $(_this).hover(function (event) {
                timeouter = setTimeout(function () {
                    fnOver_Running = true;
                    fnOver.call(_this, event)
                }, duration);
            }, function (event) {
                clearTimeout(timeouter);
                if (fnOver_Running) {
                    fnOver_Running = false;
                    fnOut.call(_this, event);
                }
            });
            return $(this);
        }
    
    })(jQuery);

    完整代码

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
     
        <style>
            .hover {
                background: #000;
                color: #fff;
            }
        </style>
    
        <script>
            ; (function ($) {
    
                $.fn.delayHover = function (fnOver, fnOut, duration) {
                    var _this = this;
                    var timeouter;
                    var defaultDuration = 500;//默认500 毫秒
                    var fnOver_Running = false;  //函数已经执行
    
                    //重置duration
                    if (typeof duration != "number" ||//不是字符串
                        isNaN(duration) || //NaN
                        duration < 0) { //非法值
    
                        duration = defaultDuration;
                    }
    
                    $(_this).hover(function (event) {
                        timeouter = setTimeout(function () {
                            fnOver_Running = true;
                            fnOver.call(_this, event)
                        }, duration);
                    }, function (event) {
                        clearTimeout(timeouter);
                        if (fnOver_Running) {
                            fnOver_Running = false;
                            fnOut.call(_this, event);
                        }
                    });
                    return $(this);
                }
    
            })(jQuery);
        </script>
    
    
        <script> 
            $(function () {
    
                $('#hovertest').hover(function () {
                    console.log('指向');
                    $(this).addClass('hover');
                },
                function () {
                    console.log('离开');
                    $(this).removeClass('hover');
                });
    
                $('#delayHover').delayHover(function () {
                    console.log('指向');
    
                    $(this).addClass('hover');
                }, function () {
                    console.log('离开');
                    $(this).removeClass('hover');
                }, 500);
                
                $('#delayHover1').delayHover(function () {
                    console.log('指向');
                    $(this).addClass('hover');
                }, function () {
                    console.log('离开');
                    $(this).removeClass('hover');
                }, 3000);            
            })
        </script>
    
    </head>
    <body>
        <h1>
            hover事件有一个缺点:不能延时显示<br />
            <i>delayHover</i>解决了这个问题
        </h1>
    
        <div id="hovertest" style="border:1px solid #ccc;  ">
            这个是hover事件 指向我看看效果
        </div>
        
        <div id="delayHover" style="margin-top:100px;">
            这个是delayHover事件 指向我看看效果  默认值500毫秒
        </div>
    
        <div id="delayHover1" style="">
            这个是delayHover事件 指向我看看效果 延迟3000毫秒
        </div>
    </body>
    </html>

    欢迎提bug

  • 相关阅读:
    LOJ 6089 小Y的背包计数问题 —— 前缀和优化DP
    洛谷 P1969 积木大赛 —— 水题
    洛谷 P1965 转圈游戏 —— 快速幂
    洛谷 P1970 花匠 —— DP
    洛谷 P1966 火柴排队 —— 思路
    51Nod 1450 闯关游戏 —— 期望DP
    洛谷 P2312 & bzoj 3751 解方程 —— 取模
    洛谷 P1351 联合权值 —— 树形DP
    NOIP2007 树网的核
    平面最近点对(加强版)
  • 原文地址:https://www.cnblogs.com/bestdqf/p/3915570.html
Copyright © 2011-2022 走看看