分享一个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
分享一个jquery插件,弥补一下hover事件的小小不足的更多相关文章
- 你真的需要一个jQuery插件吗
jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...
- Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件
请注意!!!!! 该插件demo PHP 的 demo下载 C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...
- 做了一个jquery插件，使表格的标题列可左右拉伸
示例下载 插件名称命名为:jquery.tableresize.js,代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table ...
- 如何写一个jquery插件
本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...
- 分享一个JQuery弹出层插件
JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...
- 开发一个jQuery插件——多级联动菜单
引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...
- 我的第一个jquery插件：下拉多选框
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...
- 如何去定义一个jquery插件
扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方 ...
- 自己实现一个jQuery插件
<script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script> ...
随机推荐
- Java 数组如何转成List集合
问题描述:对于给定的如下数组,如何转换成List集合? String[] array = {"a","b","c"}; 参考stackove ...
- python批量修改ssh密码
由于工作需要本文主结合了excel表格,对表格中的ssh密码进行批量修改 以下是详细代码(python3): #!/usr/bin/env python#-*-coding:utf-8-*- impo ...
- Python小工具之消耗系统指定大小内存
#!/usr/bin/python # -*- coding: utf-8 -*- import sys import re import time def print_help(): print ' ...
- torchnet package (1)
torchnet package (1) torchnet torchnet torchnet是用于torch的代码复用和模块化编程的框架,主要包含四个类 Dataset 以不同的方式对数据进行预处理 ...
- poj1191 棋盘分割。 dp
连接:http://poj.org/problem?id=1191 思路:额,其实就是直接搞记录一下就可以了. #include <stdio.h> #include <string ...
- Java虚拟机体系结构分析
下图是JAVA虚拟机的结构图: 每个Java虚拟机都有一个类装载子系统,它根据给定的全限定名来装入类型(类或接口).同样,每个Java虚拟机都有一个执行引擎,它负责执行那些包含在被装载类的方法中的指令 ...
- [转载]java调用本地dos命令
在社区看到java调用本地dos命令的代码,特贴出来 String command = "ipconfig"; Runtime run = Runtime.getRuntime() ...
- Beta阶段第2周/共2周 Scrum立会报告+燃尽图 10
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2411] 版本控制:https://git.coding.net/liuyy08 ...
- Alpha阶段第1周 Scrum立会报告+燃尽图 06
作业要求与https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246相同 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 周 ...
- L200
Last week, I read a story about a 34-year-old British woman who is extremely afraid of metal forks.S ...