jQuery hover 延时器实现代码
例如:
hover是否可以设计一个延时器呢?答案是肯定的。延时操作目的是为了防止用户误触发事件,一般情况下鼠标指针小于150毫秒的停留时间都可以被忽略。其实,如果入侵delay全能让其作用在hover事件上,但是为了避免John Resig不断的折腾jQuery而导致兼容问题,还是老老实实的写标准插件比较好。
目标
继承jQuery API的优雅:jQuery(expression).mouseDelay(150).hover(over, out)
不得破坏jQuery原型链
上述目标看起来很帅气,实现起来却非常简单,仅仅十多行的代码我都不好意思拿来拼凑文章:
源代码
* jQuery.mouseDelay.js v1.2
* http://www.planeart.cn/?p=1073
* Copyright 2011, TangBin
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function ($, plugin) {
var data = {}, id = 1, etid = plugin + 'ETID';
// 延时构造器
$.fn[plugin] = function (speed, group) {
id ++;
group = group || this.data(etid) || id;
speed = speed || 150;
// 缓存分组名称到元素
if (group === id) this.data(etid, group);
// 暂存官方的hover方法
this._hover = this.hover;
// 伪装一个hover函数,并截获两个回调函数交给真正的hover函数处理
this.hover = function (over, out) {
over = over || $.noop;
out = out || $.noop;
this._hover(function (event) {
var elem = this;
clearTimeout(data[group]);
data[group] = setTimeout(function () {
over.call(elem, event);
}, speed);
}, function (event) {
var elem = this;
clearTimeout(data[group]);
data[group] = setTimeout(function () {
out.call(elem, event);
}, speed);
});
return this;
};
return this;
};
// 冻结选定元素的延时器
$.fn[plugin + 'Pause'] = function () {
clearTimeout(this.data(etid));
return this;
};
// 静态方法
$[plugin] = {
// 获取一个唯一分组名称
get: function () {
return id ++;
},
// 冻结指定分组的延时器
pause: function (group) {
clearTimeout(data[group]);
}
};
})(jQuery, 'mouseDelay');
API说明
方法 | 参数 | 说明 |
---|---|---|
mouseDelay (speed, group) | 速度, 设置延时分组名称 | 设置延时触发效果. 两个参数都是可选的 |
mouseDelayPause() | [无] | 冻结选定元素的延时器 |
jQuery.mouseDelay.pause (group) | 延时分组名称 | 冻结指定分组的延时器 |
jQuery.mouseDelay.get () | [无] | 获取一个不重复的分组名 |
下载
演示
http://demo.jb51.net/js/2011/mouseDelay/index.htm
jQuery hover 延时器实现代码的更多相关文章
- jquery hover延时
var timer; //绑定hover事件 $(function () { $(".centercy img").hover(showPic, hid ...
- 基于jQuery虾米音乐播放器样式代码
分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div c ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- jquery实现动态添加html代码
先看下思导图,整体了解下,然后我们再来学习. 现在我们来看一下几段代码,然后根据这几段代码我们来学习一下如何正确的学习动态添加html. 一.html()方法 html函数的作用原理首先是移除目标元素 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery hover demo
先放效果图: 百度云下载地址:http://pan.baidu.com/s/1dDpn1Sl 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- JQuery hover(over,out) 使用笔记
转载自:http://www.douban.com/note/202404884/ JQuery hover(over,out) 使用笔记 JavaScript 下.onmouseover() 和 o ...
- js学习笔记(延时器)
//setTimeout() //功能:设置一个延时器 //语法:var timer = window.setTimeout(code,millisec); //参数: code:是任何合 ...
- Unity中的定时器与延时器
JavaScript中的定时器与延时器,分别是 setInterval.setTimeout,对应的清理函数是:clearInterval.clearTimeout. 而在Unity中,则分别是:In ...
随机推荐
- Rain on your Parade---hdu2389(HK求最大匹配)
题目链接 题意:有n个客人,m把雨伞,在t秒之后将会下雨,给出每个客人的坐标和每秒行走的距离,以及雨伞的位置,问t秒后最多有几个客人可以拿到雨伞? 就是求最大匹配的 Hopcroft-Karp复杂度 ...
- git-【六】分支的创建与合并
在版本回填退里,已经知道,每次提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD严格来说不是指向提交,而 ...
- 一个C#读写Dxf的类库DXFLibrary
https://github.com/Titifonky/DXFLibrary DXF 参考手册: http://docs.autodesk.com/ACD/2011/CHS/filesDXF/WSf ...
- 本地项目提交到github或者gitlab
在 gitlab中创建新项目 创建好之后会生成一个.Git路径 切换回本地工程文件目录 右键 点击git bash 在git bash 里面执行git init 初始化 git add . 提交当前 ...
- PAT 1053 Path of Equal Weight[比较]
1053 Path of Equal Weight(30 分) Given a non-empty tree with root R, and with weight Wi assigned t ...
- Selenium IDE脚本录制步骤简介
录制脚本步骤: 1.打开Selenium IDE,输入需要录制脚本的地址,然后启动Firefox,输入selenium IDE需录制的地址,根据实际需求,做相关操作: 2.录制过程中,会发现做的相关操 ...
- 关于eval 与new Function 到底该选哪个?
废话不多说,直接上测试代码 复制代码 代码如下: var aa = "{name:'cola',item:[{age:11},{age:22},{age:23},{age:23}]}&quo ...
- GIT学习笔记(1):创建版本库
GIT学习笔记(1):创建版本库 创建版本库 1.创建合适目录并初始化为仓库 版本库即需要交由Git进行版本控制的目录,其下所有文件的修改.删除,Git都能跟踪还原. 说明:初始化后,当前目录下会多出 ...
- CDOJ 1048 Bob's vector(快速幂+三分法)
题目大意:原题链接 给定数组A[i]的计算方法,求出其任意一个极值点 解题思路:求极值点用三分法,一般计算100次足矣,所以三分时上限为100,不过运行时间可能会长一点 用for循环 用w ...
- Python通用网络爬虫脚本
from sys import argv from os import makedirs,unlink,sep,mkdir from os.path import dirname,exists,isd ...