jquery Mousemoveイベントマウスを画像上でスライドさせます-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-06-28 10:23:00

オリジナル

1367 人が閲覧しました

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

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

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

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

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

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

オブジェクト

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

関数

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

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

ログイン後にコピー

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