jQuery 鼠标经过(hover)事件的延时处理示例


Posted in Javascript onApril 14, 2014

一、关于鼠标hover事件及延时
鼠标经过事件为web页面上非常常见的事件之一。简单的hover可以用CSS :hover伪类实现,复杂点的用js。

一般情况下,我们是不对鼠标hover事件进行延时处理。但是,有时候,为了避免不必要的干扰,常会对鼠标hover事件进行延时处理。所谓干扰,就是当用户鼠标不经意划过摸个链接,选项卡,或是其他区域时,本没有显示隐藏层,或是选项卡切换,但是由于这些元素上绑定了hover事件(或是mouseover事件),且无延时,这些时间就会立即触发,反而会对用户进行干扰。

例如,在腾讯网首页,几乎对所有的鼠标经过事件进行了延时处理,例如其选项卡:

jQuery 鼠标经过(hover)事件的延时处理示例 

或是其顶部的搜搜导航条,见下图:

jQuery 鼠标经过(hover)事件的延时处理示例 

二、实例及演示
本文的主要内容就是展示我前几天写的鼠标延迟的方法,jQuery下的方法,水平拙劣,仅供参考。本文就以腾讯网首页搜搜搜索栏的一些鼠标经过效果为实例,演示jQuery下的延时处理。下图为demo页面的效果截图:

jQuery 鼠标经过(hover)事件的延时处理示例 

三、代码与实现
说到延时,离不开window下的setTimeout方法,本实例的jQuery方法的核心也是setTimeout。代码不长,完整如下:

(function($){ 
$.fn.hoverDelay = function(options){ 
var defaults = { 
hoverDuring: 200, 
outDuring: 200, 
hoverEvent: function(){ 
$.noop(); 
}, 
outEvent: function(){ 
$.noop(); 
} 
}; 
var sets = $.extend(defaults,options || {}); 
var hoverTimer, outTimer; 
return $(this).each(function(){ 
$(this).hover(function(){ 
clearTimeout(outTimer); 
hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring); 
},function(){ 
clearTimeout(hoverTimer); 
outTimer = setTimeout(sets.outEvent, sets.outDuring); 
}); 
}); 
} 
})(jQuery);

这段代码的目的在于让鼠标经过事件和延时分离的出来,延时以及延迟的清除都已经由此方法解决了。您所要做的,就是设定延时的时间大小,以及相应的鼠标经过或是移除事件即可。举个简单的例子吧,如下代码:
$("#test").hoverDelay({ 
hoverEvent: function(){ 
alert("经过我!"); 
} 
});

表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过我!”文字字样的弹出框。

ok,现在应用到本文的实例上。

腾讯网的首页的搜索框上面除了鼠标经过延时,其换肤也是值得一提的,关于换肤我之前也提过,在jQuery-马化腾产品设计与用户体验的一些技术实现一文中,相应的demo页面您可以狠狠地点击这里:腾讯首页个性化换肤demo页面

首先,展示下腾讯首页搜索栏的主要HTML结构域代码:

<div id="sosoFod"> 
<h3 id="sosoweb" class="s1">网页</h3> 
<h3 id="sosoimg" class="s2">图片</h3> 
<h3 id="sosovid" class="s2">视频</h3> 
<h3 id="sosomus" class="s2">音乐</h3> 
<h3 id="sososoba" class="s2">搜吧</h3> 
<h3 id="sosowenwen" class="s2">问问</h3> 
<h3 id="sosoqz" class="s2">博客</h3> 
<h3 style="cursor:pointer;" class="s2">更多? 
<div style="display:none;" class="more" id="tm"> 
<ul> 
<li><a href="#">综合</a></li> 
<li><a href="#">新闻</a></li> 
<li><a href="#">词典</a></li> 
<li><a href="#">生活</a></li> 
<li><a href="#">百科</a></li> 
<li style="border-top:1px solid rgb(178, 208, 234);"><a href="#">所有产品</a></li> 
</ul> 
</div> 
</h3> 
</div>

与先首页代码几乎一致,如假包换。应用了本文没什么技术含量的延迟方法后,可以应用如下的代码实现延迟执行。
$(".s2").each(function(){ 
$("#sosoFod h3").each(function(){ 
var that = $(this); 
var id = that.attr("id"); 
if(id){ 
that.hoverDelay({ 
hoverEvent: function(){ 
$(".s1").attr("class","s2"); 
that.attr("class","s1"); //感谢“type23”提供了绑定对象方法 
$(this).attr("class","s1"); 
} 
}); 
}else{ 
that.hoverDelay({ 
outDuring: 1000, 
hoverEvent: function(){ 
$("#tm").show(); 
}, 
outEvent: function(){ 
$("#tm").hide(); 
} 
}); 
} 
});

唉,惭愧,代码就这样,没什么技术含量的,希望对有用的有用吧。“更多”的下拉鼠标移出后1000毫秒后下拉框隐藏。

基本上都是代码在撑页面,说点有用的东西吧。

hoverDelay方法共四个参数,表示意思如下:

hoverDuring       鼠标经过的延时时间
outDuring          鼠标移出的延时时间
hoverEvent        鼠标经过执行的方法
outEvent         鼠标移出执行的方法

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
jQuery实现滚动效果
Nov 17 jQuery
对vue.js中this.$emit的深入理解
Feb 23 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
jquery使用jxl插件导出excel示例
Apr 14 #Javascript
js 获取input点选按钮的值的方法
Apr 14 #Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 #Javascript
Js实现动态添加删除Table行示例
Apr 14 #Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 #Javascript
PHP开发者必须掌握的6个关键字
Apr 14 #Javascript
javascript中的括号()用法小结
Apr 14 #Javascript
You might like
自动分页的不完整解决方案
2007/01/12 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
大学团支书的自我评价分享
2013/12/14 职场文书
简历中的自我评价范文
2014/02/05 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
新员工入职感想
2015/08/07 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
详解MySQL的内连接和外连接
2023/05/08 MySQL