快捷導(dǎo)航

jQuery 鼠標(biāo)經(jīng)過(guò)(hover)事件的延時(shí)處理示例

更新時(shí)間：2014年04月14日 15:56:37 作者：

一般情況下，我們是不對(duì)鼠標(biāo)hover事件進(jìn)行延時(shí)處理。但是，有時(shí)候，為了避免不必要的干擾，常會(huì)對(duì)鼠標(biāo)hover事件進(jìn)行延時(shí)處理

一、關(guān)于鼠標(biāo)hover事件及延時(shí)
鼠標(biāo)經(jīng)過(guò)事件為web頁(yè)面上非常常見(jiàn)的事件之一。簡(jiǎn)單的hover可以用CSS :hover偽類實(shí)現(xiàn)，復(fù)雜點(diǎn)的用js。

一般情況下，我們是不對(duì)鼠標(biāo)hover事件進(jìn)行延時(shí)處理。但是，有時(shí)候，為了避免不必要的干擾，常會(huì)對(duì)鼠標(biāo)hover事件進(jìn)行延時(shí)處理。所謂干擾，就是當(dāng)用戶鼠標(biāo)不經(jīng)意劃過(guò)摸個(gè)鏈接，選項(xiàng)卡，或是其他區(qū)域時(shí)，本沒(méi)有顯示隱藏層，或是選項(xiàng)卡切換，但是由于這些元素上綁定了hover事件（或是mouseover事件），且無(wú)延時(shí)，這些時(shí)間就會(huì)立即觸發(fā)，反而會(huì)對(duì)用戶進(jìn)行干擾。

例如，在騰訊網(wǎng)首頁(yè)，幾乎對(duì)所有的鼠標(biāo)經(jīng)過(guò)事件進(jìn)行了延時(shí)處理，例如其選項(xiàng)卡：

騰訊首頁(yè)選項(xiàng)卡張?chǎng)涡?鑫空間-鑫生活

或是其頂部的搜搜導(dǎo)航條，見(jiàn)下圖：

騰訊網(wǎng)首頁(yè)搜搜搜索欄張?chǎng)涡?鑫空間-鑫生活

二、實(shí)例及演示
本文的主要內(nèi)容就是展示我前幾天寫(xiě)的鼠標(biāo)延遲的方法，jQuery下的方法，水平拙劣，僅供參考。本文就以騰訊網(wǎng)首頁(yè)搜搜搜索欄的一些鼠標(biāo)經(jīng)過(guò)效果為實(shí)例，演示jQuery下的延時(shí)處理。下圖為demo頁(yè)面的效果截圖：

jQuery鼠標(biāo)延遲demo截圖張?chǎng)涡?鑫空間-鑫生活

三、代碼與實(shí)現(xiàn)
說(shuō)到延時(shí)，離不開(kāi)window下的setTimeout方法，本實(shí)例的jQuery方法的核心也是setTimeout。代碼不長(zhǎng)，完整如下：

復(fù)制代碼代碼如下:

 
(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); 

這段代碼的目的在于讓鼠標(biāo)經(jīng)過(guò)事件和延時(shí)分離的出來(lái)，延時(shí)以及延遲的清除都已經(jīng)由此方法解決了。您所要做的，就是設(shè)定延時(shí)的時(shí)間大小，以及相應(yīng)的鼠標(biāo)經(jīng)過(guò)或是移除事件即可。舉個(gè)簡(jiǎn)單的例子吧，如下代碼：

復(fù)制代碼代碼如下:

 
$("#test").hoverDelay({ 
hoverEvent: function(){ 
alert("經(jīng)過(guò)我！"); 
} 
}); 

表示的含義是id為test的元素在鼠標(biāo)經(jīng)過(guò)后200毫秒后彈出含有“經(jīng)過(guò)我！”文字字樣的彈出框。

ok，現(xiàn)在應(yīng)用到本文的實(shí)例上。

騰訊網(wǎng)的首頁(yè)的搜索框上面除了鼠標(biāo)經(jīng)過(guò)延時(shí)，其換膚也是值得一提的，關(guān)于換膚我之前也提過(guò)，在jQuery-馬化騰產(chǎn)品設(shè)計(jì)與用戶體驗(yàn)的一些技術(shù)實(shí)現(xiàn)一文中，相應(yīng)的demo頁(yè)面您可以狠狠地點(diǎn)擊這里：騰訊首頁(yè)個(gè)性化換膚demo頁(yè)面

首先，展示下騰訊首頁(yè)搜索欄的主要HTML結(jié)構(gòu)域代碼：

復(fù)制代碼代碼如下:

 
<div id="sosoFod"> 
<h3 id="sosoweb" class="s1">網(wǎng)頁(yè)</h3> 
<h3 id="sosoimg" class="s2">圖片</h3> 
<h3 id="sosovid" class="s2">視頻</h3> 
<h3 id="sosomus" class="s2">音樂(lè)</h3> 
<h3 id="sososoba" class="s2">搜吧</h3> 
<h3 id="sosowenwen" class="s2">問(wèn)問(wèn)</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="#">所有產(chǎn)品</a></li> 
</ul> 
</div> 
</h3> 
</div> 

與先首頁(yè)代碼幾乎一致，如假包換。應(yīng)用了本文沒(méi)什么技術(shù)含量的延遲方法后，可以應(yīng)用如下的代碼實(shí)現(xiàn)延遲執(zhí)行。

復(fù)制代碼代碼如下:

 
$(".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”提供了綁定對(duì)象方法 
$(this).attr("class","s1"); 
} 
}); 
}else{ 
that.hoverDelay({ 
outDuring: 1000, 
hoverEvent: function(){ 
$("#tm").show(); 
}, 
outEvent: function(){ 
$("#tm").hide(); 
} 
}); 
} 
}); 

唉，慚愧，代碼就這樣，沒(méi)什么技術(shù)含量的，希望對(duì)有用的有用吧。“更多”的下拉鼠標(biāo)移出后1000毫秒后下拉框隱藏。

基本上都是代碼在撐頁(yè)面，說(shuō)點(diǎn)有用的東西吧。

hoverDelay方法共四個(gè)參數(shù)，表示意思如下：

hoverDuring       鼠標(biāo)經(jīng)過(guò)的延時(shí)時(shí)間
outDuring          鼠標(biāo)移出的延時(shí)時(shí)間
hoverEvent        鼠標(biāo)經(jīng)過(guò)執(zhí)行的方法
outEvent         鼠標(biāo)移出執(zhí)行的方法

您可能感興趣的文章: