ホームページ > 記事 > ウェブフロントエンド > JavaScriptでマウスホイールコントロールのページ画像切り替えを実装
マウスのスクロール ホイールは便利な機能なので、ウェブをすばやく閲覧したり、長い記事をすばやく読んだりできるからです。 Web フロントエンドに携わる私たちにとって、このマウス ホイールに注意を払わないわけがありません。では、どうすればユーザーが Web をより快適に閲覧できるようになるでしょうか?この記事では、主にマウス ホイール コントロールのページ画像切り替え機能を実装するための JavaScript を紹介します。これには、JavaScript イベント応答とページ要素の動的操作関連の実装テクニックが含まれます。
最も一般的なのは、ホイールをスクロールすることで画像を閲覧できるため、ユーザーが次の画像をクリックして面倒な手順を行う必要がなくなります。簡単な例を見てみましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标通过滚动滚轮切换图片</title> <style> #picBox{ width:800px;height:600px; margin:70px auto; } </style> <script> var nowPic=1; function MouseWheel(e){ var pic; e=e||window.event; for(i=1;i<4;i++){ if(i==nowPic){ if(e.wheelDelta){//IE pic=document.getElementById("pic"+i); pic.style.display="block"; }else if(e.detail){//Firefox pic=document.getElementById("pic"+i); pic.style.display="block"; } }else{ pic=document.getElementById("pic"+i); pic.style.display="none"; } } if(nowPic>=3){ nowPic=1; }else{ nowPic++; } } /*Firefox注册事件*/ if(document.addEventListener){ document.addEventListener("DOMMouseScroll",MouseWheel,false); } window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome </script> </head> <body> <h3 align="center">鼠标通过滚动滚轮切换图片</h3> <p id="picBox"> <img src="http://picm.bbzhi.com/dongwubizhi/dongwuheji/dongwuheji_69803_m.jpg" width="800px" height="600px" id="pic1"> <span style="white-space:pre"> </span><img src="http://pic1a.nipic.com/2008-12-22/2008122204359187_2.jpg" width="800px" height="600px" id="pic2" style="display:none;"> <span style="white-space:pre"> </span><img src="http://imgphoto.gmw.cn/attachement/jpg/site2/20121221/002564a60ce4123e17614e.jpg" width="800px" height="600px" id="pic3" style="display:none;"> </p> </body> </html>
js コードに注目してください。ブラウザごとに異なるマウスホイールイベントがあります。端的に言えば、onmousewheel (IE/Opera/Safari/Chrome) と DOMMouseScroll (Firefox) の 2 種類があります。 Firefox と互換性を持たせたい場合は、addEventListener を使用してリッスンする必要があります。この関数には addEventListener(type、listener、useCapture) という 3 つのパラメータがあり、type は click、focus... タイプで、リスナーは直接書き込むことができます。 Method function(){}, この例のように、記述されたメソッド本体を呼び出すこともできます。 useCapture は true と false のみのブール値で、false が選択されている場合はバブリング メソッドが使用され、true が選択されている場合は Capture メソッドが使用されます。 addEventListenerについては後ほど詳しく説明します。
MouseWheel メソッドでは、e.wheelDelta は IE およびその他のブラウザーと互換性があり、ホイールを回転させるたびに +3/-3 (スクロールアップ/ダウン) を返しますが、e.detail は Firefox ブラウザーと互換性があります。ホイールを回すたびに +120/-120 (上スクロール/下スクロール) が返され、これらの戻り値を使用して上にスクロールするか下にスクロールするかを決定できます。 for ループは画像を順番に非表示にしたり表示したりするだけなので、理解するのは難しくないと思います。
記事内の間違いや脱落があれば修正してください。
関連する推奨事項:
js ページのフォント サイズを制御する問題_html/css_WEB-ITnose
jQuery 学習ノート ページの実装コードを制御する_jquery
js ページ ジャンプを制御する 5 つの方法_ JavaScript スキル
以上がJavaScriptでマウスホイールコントロールのページ画像切り替えを実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。