ホームページ >ウェブフロントエンド >jsチュートリアル >jquery Mousemoveイベントマウスを画像上でスライドさせます

jquery Mousemoveイベントマウスを画像上でスライドさせます

黄舟
黄舟オリジナル
2017-06-28 10:23:001386ブラウズ

解決すべき問題: 画像 上でマウスが停止したとき、現在の画像の関連情報

私の最初の感情は、マウス イベント : 画像上に留まっているときにマウスを移動することです。対応する表示イベントがトリガーされ、マウスアウトが離れると非表示イベントがトリガーされるが、関連情報を調べたところ、マウスが画像上に留まると情報が揺れ続けることがわかりました。マニュアルでは、mouseover イベントの説明が次のようになっていることがわかりました:

注: ユーザーがマウスを 1 ピクセル移動すると、mousemove イベントが発生します。すべてのmousemoveイベントを処理すると、システム リソースが消費されます。このイベントは慎重にご利用ください。


つまり、マウスを 1 ピクセル振るだけでも表示イベントがトリガーされ、画像情報リソースが発生するのは不思議ではありません

解決策は次のとおりです: 公式マニュアルにはこの方法が説明されています:

ホバー イベント (マウスが

オブジェクト

上を移動したり、オブジェクトから外に移動したりする) をシミュレートするメソッド。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。 マウスが一致する要素上に移動すると、指定された最初の

関数

がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。さらに、マウスが特定の要素 (たとえば、p の画像) 内にあるかどうかの検出も伴います。そうであれば、move-out イベントをトリガーせずに「ホバー」状態を維持し続けます。マウスアウト イベントを使用するときの よくある間違い ) を修正しました。 コード例:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

以上がjquery Mousemoveイベントマウスを画像上でスライドさせますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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