jQuery-Maus über (Hover) Ereignisverzögerungsverarbeitung example

jQuery-Maus über (Hover) Ereignisverzögerungsverarbeitung example_jquery

WBOY

Freigeben： 2016-05-16 16:52:25

Original

1483 Leute haben es durchsucht

1. Über das Mouse-Hover-Ereignis und die Verzögerung
Das Mouse-Passing-Ereignis ist eines der häufigsten Ereignisse auf Webseiten. Einfaches Hover kann mit der CSS-Pseudoklasse :hover implementiert werden, und komplexere können mit js implementiert werden.

Unter normalen Umständen verzögern wir die Verarbeitung von Mausbewegungsereignissen nicht. Um jedoch unnötige Störungen zu vermeiden, wird das Mouseover-Ereignis manchmal verzögert. Die sogenannte Interferenz bedeutet, dass, wenn der Benutzer versehentlich einen Link, einen Tab oder einen anderen Bereich mit der Maus berührt, die ausgeblendete Ebene nicht angezeigt oder der Tab gewechselt wird, sondern weil das Hover-Ereignis (oder Mouseover-Ereignis) an diese gebunden ist Elemente) und ohne Verzögerung werden diese Zeiten sofort ausgelöst, was die Benutzer stört.

Zum Beispiel sind auf der Tencent-Homepage fast alle Mausbewegungsereignisse verzögert, wie zum Beispiel die Registerkarte:

腾讯首页选项卡张鑫旭-鑫空间-鑫生活

oder die Soso-Navigationsleiste oben. siehe das Bild unten:

腾讯网首页搜搜搜索栏张鑫旭-鑫空间-鑫生活

2. Beispiele und Demonstrationen
Der Hauptinhalt dieses Artikels besteht darin, die Mausverzögerungsmethode zu zeigen, die ich vor ein paar Tagen geschrieben habe unter jQuery ist von schlechter Qualität und dient nur als Referenz. In diesem Artikel werden einige Mausbewegungseffekte der Soso-Suchleiste auf der Homepage von Tencent als Beispiel verwendet, um die Verzögerungsverarbeitung unter jQuery zu demonstrieren. Das Bild unten ist ein Screenshot der Wirkung der Demoseite:

jQuery鼠标延迟demo截图张鑫旭-鑫空间-鑫生活

3. Code und Implementierung
Apropos Verzögerung: Auf die setTimeout-Methode unter Windows können wir nicht verzichten . In diesem Beispiel ist der Kern der jQuery-Methode auch setTimeout. Der Code ist nicht lang, der vollständige Code lautet wie folgt:

Kopieren Sie den Code Der Code lautet wie folgt:

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


The Der Zweck dieses Codes besteht darin, die Maus das Ereignis passieren zu lassen und die Trennung von Verzögerung, Verzögerung und Verzögerungslöschung wurde durch diese Methode gelöst. Sie müssen lediglich die Verzögerungszeit und das entsprechende Mauspass- oder Entfernungsereignis festlegen. Nehmen wir ein einfaches Beispiel, den folgenden Code: 

Kopieren Sie den Code

Der Code lautet wie folgt:

$("#test").hoverDelay({ hoverEvent: function(){ alert("Pass me!"); } });

 bedeutet, dass das Element mit der ID-Prüfung 200 Millisekunden nach dem Überfahren mit der Maus ein Popup-Fenster mit dem Text „Pass me!“ öffnet. 

ok, wenden Sie es jetzt auf die Beispiele in diesem Artikel an. 

 Neben der Mausverzögerung im Suchfeld auf der Homepage von Tencent.com ist auch die Skin-Änderung erwähnenswert, die ich zuvor anhand einiger Produktdesigns von jQuery-Ma Huateng erwähnt habe Benutzererfahrungstechnologien. Im Implementierungsartikel können Sie hier klicken, um zur entsprechenden Demoseite zu gelangen: Demoseite zur personalisierten Skin-Änderung der Tencent-Homepage 

 Zeigen Sie zunächst den Haupt-HTML-Strukturfeldcode der Suchleiste auf der Tencent-Homepage an:

Code kopieren

Der Code lautet wie folgt:

网页

图片

视频

音乐

搜吧

问问

博客

更多▼

综合

新闻

词典

生活

百科

所有产品

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

复制代码代码如下:

 
$(".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毫秒后下拉框隐藏. 

基本上都是代码在撑页面，说点有用的东西吧. 