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数组组合成字符串的脚本
Jan 06 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
vue组件的写法汇总
Apr 12 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
详解jquery和vue对比
Apr 16 jQuery
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php定界符
2014/06/19 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
php输出图像的方法实例分析
2017/02/16 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
Exception类的常用方法
2012/06/16 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
软件工程师岗位职责
2013/11/16 职场文书
医学生求职自荐书
2014/06/12 职场文书
会计人员演讲稿
2014/09/11 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
世界地球日活动总结
2015/02/09 职场文书
党员转正意见怎么写
2015/06/03 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
用Python可视化新冠疫情数据
2022/01/18 Python