JSを使用してマウスホイールバインディングのページ画像切り替えを実装する

今回はJSを使ってマウスホイールで綴じたページの画像を切り替える方法を紹介します JSを使ってマウスホイールで綴じたページの画像を切り替える場合の注意点は以下の通りです。実際のケースを見てみましょう。

マウスのスクロール ホイールは便利な機能なので、Web ページをすばやく閲覧したり、長い記事をすばやく読んだりできるからです。 Web フロントエンドに携わる私たちにとって、このマウス ホイールに注意を払わないわけがありません。では、どうすればユーザーが Web をより快適に閲覧できるようになるでしょうか?

最も一般的な方法は、ホイールをスクロールして画像を閲覧することで、ユーザーが次の画像をクリックして面倒な手順を実行する必要がなくなります。簡単な例を見てみましょう。

りー

js コードに注目してみましょう。ブラウザごとに異なるマウス ホイール イベントがあるのは、主に 2 つのタイプ、

onmousewheel (IE/Opera/Safari/Chrome) と DOMMouscroll です。 ). Firefox と互換性を持たせたい場合は、addEventListener を使用してリッスンする必要があります。 タイプは click、focus... type であり、リスナーはメソッド function(){ を直接記述することができます。または、私の例のように、適切なメソッド本体を呼び出して記述することもできます。 useCapture は true と false のみのブール値で、false が選択されている場合はバブリング メソッドが使用され、true が選択されている場合は Capture メソッドが使用されます。 addEventListenerについては後ほど詳しく説明します。 addEventListener(type,listener,useCapture)

MouseWheel メソッドでは、e.wheelDelta は IE などの他のブラウザと互換性があり、ホイールを回転させるたびに +3/-3 (スクロールアップ/ダウン) を返しますが、e.detail は Firefox ブラウザと互換性があります。ホイールを回すたびに +120/-120 (上スクロール/下スクロール) が返されます。これらの戻り値は、上にスクロールするか下にスクロールするかを決定するために使用できます。

forループは画像を順番に非表示にしたり表示したりするだけなので、理解するのは難しくないと思います。

記事内の間違いや脱落があれば修正していただければ幸いです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue クロスドメインの通常のデバッグ

JS におけるポリモーフィズムの詳細な説明

以上がJSを使用してマウスホイールバインディングのページ画像切り替えを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。