jQuery survoler (survoler) le traitement du retard des événements example_jquery

1. À propos de l'événement de survol de la souris et du délai
L'événement de passage de la souris est l'un des événements les plus courants sur les pages Web. Un survol simple peut être implémenté à l'aide de la pseudo-classe CSS :hover, et des survols plus complexes peuvent être implémentés à l'aide de js.

Dans des circonstances normales, nous ne retardons pas le traitement des événements de survol de la souris. Cependant, parfois, afin d'éviter des interférences inutiles, l'événement de survol de la souris est souvent retardé. Ce que l'on appelle l'interférence signifie que lorsque l'utilisateur touche par inadvertance un lien, un onglet ou une autre zone avec la souris, le calque caché ne s'affiche pas ou l'onglet change, mais parce que l'événement de survol (ou l'événement de survol de la souris) est lié à ceux-ci. éléments ), et sans délai, ces délais se déclencheront immédiatement, ce qui gênera les utilisateurs.

Par exemple, sur la page d'accueil de Tencent, presque tous les événements de passage de souris sont retardés, comme son onglet :



ou son haut La barre de navigation Soso, voir l'image ci-dessous :



2. Exemples et démonstrations
Le contenu principal de cet article est de montrer la méthode de retard de la souris que j'ai écrite il y a quelques jours. sous jQuery est de mauvaise qualité et sert uniquement de référence. Cet article prend comme exemple quelques effets de passage de souris de la barre de recherche Soso sur la page d'accueil de Tencent pour démontrer le traitement du retard sous jQuery. L'image ci-dessous est une capture d'écran de l'effet de la page de démonstration :



3. Code et implémentation
En parlant de retard, on ne peut pas se passer de la méthode setTimeout sous window Dans cet exemple, jQuery Le cœur de la méthode est également setTimeout. Le code n'est pas long, le code complet est le suivant :

Copiez le code Le code est le suivant :

(function ($){
$.fn.hoverDelay = function(options){
var defaults = {
hoverDuring : 200,
outDuring : 200,
hoverEvent : function(){
$.noop();
},
outEvent : function(){
$.noop();
}
}; 🎜>var sets = $.extend(defaults ,options || {});
var hoverTimer,
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); le but de ce code est de laisser la souris passer l'événement et la séparation du délai, du délai et de l'effacement du délai a été résolue par cette méthode. Tout ce que vous avez à faire est de définir le délai et le passage de souris ou l'événement de suppression correspondant. Prenons un exemple simple, le code suivant :

Copiez le code

Le code est le suivant : $("#test").hoverDelay({ hoverEvent: function(){ alert("Passe-moi !"); }

});

signifie que l'élément avec l'identifiant test fera apparaître une boîte contextuelle contenant le texte "Passe-moi !" 200 millisecondes après le passage de la souris dessus.

ok, appliquez-le maintenant aux exemples de cet article.

En plus du délai de souris dans le champ de recherche sur la page d'accueil de Tencent.com, son changement de skin mérite également d'être mentionné. J'ai déjà mentionné le changement de skin, en utilisant certains des produits de jQuery-Ma Huateng. technologies d'expérience utilisateur. Dans l'article de mise en œuvre, vous pouvez cliquer ici pour la page de démonstration correspondante : Page d'accueil de Tencent Page de démonstration de changement de skin personnalisé

Tout d'abord, affichez le code du champ de structure HTML principal de la barre de recherche sur la page d'accueil de Tencent :





Copier le code


Le code est le suivant :

网页

图片

视频

音乐

搜吧

问问

博客

更多▼

• 综合


• 新闻


• 词典


• 生活


• 百科


• 所有产品

与先首页代码几乎一致，如假包换。应用了本文没什么技术含量的延迟方法后，可以应用如下的代码实现延迟执行。

复制代码 代码如下:

$(".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          鼠标经过执行的方法
outEvent         鼠标移出执行的方法