jQuery 마우스 오버(hover) 이벤트 지연 처리 example_jquery

1. 마우스 호버 이벤트 및 지연 정보
마우스 통과 이벤트는 웹 페이지에서 매우 일반적인 이벤트 중 하나입니다. 간단한 호버는 CSS :hover 의사 클래스를 사용하여 구현할 수 있고, 더 복잡한 호버는 js를 사용하여 구현할 수 있습니다.

일반적인 상황에서는 마우스 호버 이벤트 처리가 지연되지 않습니다. 그러나 때로는 불필요한 간섭을 피하기 위해 마우스 호버 이벤트가 지연되는 경우가 많습니다. 소위 간섭이란 사용자가 실수로 링크나 탭, 기타 영역을 마우스로 터치했을 때 숨겨진 레이어가 표시되지 않거나 탭이 전환되는 것을 의미하는데, 호버 이벤트(또는 마우스오버 이벤트)가 이에 묶여 있기 때문입니다. 요소), 지체 없이 이러한 시간이 즉시 트리거되어 사용자에게 방해가 됩니다.

예를 들어 Tencent 홈페이지에서는 탭



또는 상단 Soso 탐색 모음과 같은 거의 모든 마우스 통과 이벤트가 지연됩니다. 아래 그림을 참조하세요:



2. 예제 및 데모
이 글의 주요 내용은 제가 며칠 전에 작성한 마우스 지연 방법을 보여주는 것입니다. jQuery의 경우 품질이 좋지 않으며 참조용으로만 사용됩니다. 이 기사에서는 Tencent 홈페이지에 있는 Soso 검색창의 마우스 통과 효과를 예로 들어 jQuery에서의 지연 처리를 보여줍니다. 아래 그림은 데모 페이지 효과의 스크린샷입니다:



3. 코드 및 구현
지연 얘기가 나와서 말인데, 창 아래에 setTimeout 메서드가 없으면 할 수 없습니다. 이 예에서는 jQuery 메소드의 핵심도 setTimeout입니다. 코드는 길지 않습니다. 전체 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(함수($){
$.fn.hoverDelay = 함수(옵션){
var defaults = {
hoverDuring: 200,
outDuring: 200,
hoverEvent: function(){
$.noop();
},
outEvent: function(){
$.noop()
}
}; 🎜>var set = $.extend(defaults ,options || {});
var hoverTimer, outTimer
return $(this).each(function(){
$(this).hover; (function(){
clearTimeout( outTimer);
hoverTimer = setTimeout(sets.hoverEvent, set.hoverDuring);
},function(){
clearTimeout(hoverTimer);
outTimer = setTimeout(sets.outEvent, set.outDuring );
});
})
}
})(jQuery); 이 코드의 목적은 마우스가 이벤트를 통과하도록 하는 것이며 지연, 지연 및 지연 삭제의 분리가 이 방법으로 해결되었습니다. 여러분이 해야 할 일은 지연 시간과 해당 마우스 통과 또는 제거 이벤트를 설정하는 것뿐입니다. 간단한 예를 들어보겠습니다. 다음 코드는

코드 복사

코드는 다음과 같습니다. $("#test").hoverDelay({ hoverEvent: function(){ alert("패스해 주세요!");

}

});

은 id 테스트가 있는 요소가 마우스가 해당 요소 위로 지나간 후 ​​200밀리초 후에 "Pass me!"라는 텍스트가 포함된 팝업 상자를 표시한다는 의미입니다.

자, 이제 이 글의 예시에 적용해 보세요.

Tencent.com 홈페이지 검색창의 마우스 지연 외에도 jQuery-Ma Huateng의 제품 디자인과 일부를 사용하여 스킨 변경에 대해 언급한 바 있습니다. 사용자 경험 기술 구현 기사에서 해당 데모 페이지를 보려면 여기를 클릭하세요: Tencent 홈페이지 맞춤형 스킨 변경 데모 페이지

먼저 Tencent 홈페이지 검색창의 기본 HTML 구조 필드 코드를 표시하세요. 🎜>




코드 복사


코드는 다음과 같습니다.

网页

사진

视频

음향

搜吧

问问

博客

更多▼

• 합작


• New闻


• 词典


• 生活


• 百科


• 所有产product

与先首页代码几乎一致，如假包换。现延迟执行。

复代码 代码如下:

$(".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: 함수 (){
$("#tm").hide();
}
})


唉，惭愧，代码就这样，没什么技术含藏 ，希望对有毹多 下拉鼠标移后1000毫秒后下拉框隐藏。

基本上뚜是代码에서 撑页면，说点다양한 용도의 东西吧.

hoverDelay 방법共4个参数，表示意思如下：

hoverDuring       鼠标经过的延时时间
outDuring          鼠标移出的延时时间

hoverEvent        鼠标经过执行间
outEvent         鼠标移流执行적 방법