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 multibox 全选
Mar 22 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
js中settimeout方法加参数
Feb 28 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 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
文章推荐系统(三)
2006/10/09 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
基于python编写的微博应用
2014/10/17 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
电子商务专业应届生求职信
2014/05/28 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
三好学生评语大全
2014/12/29 职场文书
服务承诺书
2015/01/19 职场文书
前台岗位职责
2015/02/13 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
Python数组变形的几种实现方法
2022/05/30 Python