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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript语句中的CDATA标签的意义
May 09 Javascript
javascript web对话框与弹出窗口
Feb 22 Javascript
jquery offset函数应用实例
Nov 14 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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
PHP初学者头疼问题总结
2006/07/08 PHP
php MySQL与分页效率
2008/06/04 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
php获取远程文件大小
2015/10/20 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
python Django批量导入数据
2016/03/25 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
python如何运行js语句
2020/09/09 Python
亲戚结婚的请假条
2014/02/11 职场文书
车间主任岗位职责
2014/03/16 职场文书
暑期培训心得体会
2014/09/02 职场文书
实习协议书
2015/01/27 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang