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 ...
随机推荐
- 小米范工具系列之六:小米范 web查找器2.x版本发布
小米范web查找器是一款快速识别端口及服务的小工具. 此工具使用java 1.8以上版本运行. 下载地址:http://pan.baidu.com/s/1c1NDSVe 文件名web finder ...
- centos 配置mysql
1.在线安装 1.首先检测一下,mysql之前有没有被安装 命令:rpm -qa | grep mysql 2.删除mysql的命令: rpm -e --nodeps `rpm -qa | grep ...
- python分段算利润、税收
''' 题目:企业发放的奖金根据利润提成. 利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%: 2 ...
- 滚动侦测scrollspy
<!doctype html><html> <head><meta charset="utf-8"><meta http-eq ...
- MFC截图和界面刷新相关问题
问题描写叙述: 就是首先用CDC来截图,保存图片的路径通过dlg窗体来手动设置并传入.但是截下来的图片就会连带那个对话框也截图下来. 就是这样.我想截后面那个图.前面这 ...
- hdu4758 Walk Through Squares
地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=4758 题目: Walk Through Squares Time Limit: 4000/20 ...
- 587. Erect the Fence(凸包算法)
问题 给定一群树的坐标点,画个围栏把所有树围起来(凸包). 至少有一棵树,输入和输出没有顺序. Input: [[1,1],[2,2],[2,0],[2,4],[3,3],[4,2]] Output: ...
- HDU1503Advanced Fruits
/*给出两串,求一个最小的字符串包含这两个子串,子串在这个字符串中的顺序不变, 做法:定义两个数组,分别标记公共部分在第一个串和第二个串中的位置,在输出是判断一下,输出一个串两个公共部分之间的部分,不 ...
- 无界面Ubuntu服务器搭建selenium+chromedriver+VNC运行环境
搭建背景 有时候我们需要把基于selenium的爬虫放到服务器上跑的时候,就需要这样一套运行环境,其中VNC是虚拟的显示模式,用于排查定位线上问题以及实时运行情况. 搭建流程 安装虚拟输出设备:sud ...
- 20145211《网络对抗》逆向及BOF基础实践
逆向及BOF基础实践——又是一年梅落时 一.实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. ...