ホームページ > ウェブフロントエンド > jsチュートリアル > JSを使用してマウスホイールバインディングのページ画像切り替えを実装する

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

php中世界最好的语言
リリース: 2018-04-17 15:15:32
オリジナル
1603 人が閲覧しました

今回は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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート