jQueryのマウスオーバー(ホバー)イベントの遅延処理 example_jquery

1. マウスホバーイベントと遅延について
マウス通過イベントは、Web ページ上で非常に一般的なイベントの 1 つです。単純なホバーは CSS :hover 疑似クラスを使用して実装でき、より複雑なものは js を使用して実装できます。

通常の状況では、マウスホバーイベントの処理は遅延しません。ただし、不要な干渉を避けるために、マウス ホバー イベントが遅延されることがよくあります。いわゆる干渉とは、ユーザーが誤ってリンクやタブなどの領域をマウスで触れたときに、ホバーイベント（またはマウスオーバーイベント）がこれらにバインドされているため、非表示レイヤーが表示されなかったり、タブが切り替わったりすることを意味します。要素)、これらの時間は遅延なく即座にトリガーされるため、ユーザーの邪魔になります。

たとえば、Tencent ホームページでは、タブ



やその上部の Soso ナビゲーション バーなど、ほとんどすべてのマウス通過イベントが遅延します。下の図を参照してください:



2. 例とデモ
この記事の主な内容は、私が数日前に書いたマウス遅延方法を示すことです。 jQuery の下では品質が低いため、参照のみを目的としています。この記事では、Tencent のホームページにある Soso 検索バーのマウス通過効果を例として取り上げ、jQuery での遅延処理を示します。下の図は、デモ ページの効果のスクリーンショットです。



3. コードと実装
遅延といえば、ウィンドウの下の setTimeout メソッドなしではできません。この例でも、jQuery メソッドの中心となるのは setTimeout です。コードは長くありません。完全なコードは次のとおりです:

コードをコピーします コードは次のとおりです:

(function ($){
$.fn.hoverDelay = function(options){
var defaults = {
hoverDuring: 200,
outDuring: 200,
hoverEvent: function(){
$.noop();
}、
outEvent: function(){
$.noop();
}; 🎜>var セット = $.extend(defaults ,options || {});
var hoverTimer, outTimer
return $(this).each(function(){
$(this).hover; (function(){
clearTimeout( outTimer);
hoverTimer = setTimeout(sets.hoverEvent,ets.hoverDuring);
},function(){
clearTimeout(hoverTimer);
outTimer = setTimeout(sets.outEvent, sets.outDuring );
});



このコードの目的は、マウスにイベントを渡すことです。遅延、遅延、遅延のクリアの分離は、この方法によって解決されました。必要なのは、遅延時間と、対応するマウスの通過または削除イベントを設定することだけです。簡単な例として、次のコードを見てみましょう:

コードをコピーします

コードは次のとおりです: $("#test").hoverDelay({ hoverEvent: function(){ alert("パスしてください!");

}

});

は、ID test を持つ要素が、マウスがその上を通過してから 200 ミリ秒後に「Pass me!」というテキストを含むポップアップ ボックスをポップアップ表示することを意味します。

わかりました。この記事の例に適用してください。

Tencent.com のホームページの検索ボックスのマウスの遅延に加えて、jQuery-Ma Huateng の製品デザインの一部を使用したスキンの変更についても言及する価値があります。ユーザー エクスペリエンス テクノロジーの実装記事では、ここをクリックすると対応するデモ ページが表示されます: Tencent ホームページのパーソナライズされたスキン変更デモ ページ

まず、Tencent ホームページの検索バーのメイン HTML 構造フィールド コードを表示します。 🎜>




コードをコピー


コードは次のとおりです:

网页

画像

ビデオ

音乐

搜吧

问问

博客

続き▼

• 综合


• 新闻


• 词典


• 生活


• 百科


• すべての商品

は、パケット交換のように、最初のコードと一致する。ここで何の技術も含まない遅延方法を使用した後、次のようなコードを使用して実行することができる。

复制代码代码如下: $(".s2").each(function(){

$ ("#sosoFod h3").each(function(){

var that = $(this);
var id = that.attr("id");
if(id){
that.hoverDelay({
hoverEvent: function(){
$(".s1").attr("クラス","s2");
that.attr("クラス","s1 "); //感谢“type23”提供绑定对メソッド
$(this).attr("class","s1");
}
});
}else{
that.hoverDelay({
outDuring: 1000,
hoverEvent: function(){
$("#tm").show();
},
outEvent: function (){
$("#tm").hide()
}
});


唉，惭愧

は基本的にすべて、キーボード面にあるコードです。

hoverDelay メソッドには 4 つのパラメータがあり、以下のように示します:

hoverDuring ネズミ标移動の遅延時間
outDuring ネズミ标移動の遅延時間
hoverEvent ネズミ标移動の実行方法
outEvent実行方法

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

1 か月前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7622

15

CakePHP チュートリアル

1389

52

Steamのアカウント名の形式は何ですか

89

11

Win11 Activation Key Permanent

70

19

NYTの接続はヒントと回答です

31

138

もっと見る