ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptでマウスホイールコントロールのページ画像切り替えを実装

JavaScriptでマウスホイールコントロールのページ画像切り替えを実装

小云云
小云云オリジナル
2018-01-29 10:27:122093ブラウズ

マウスのスクロール ホイールは便利な機能なので、ウェブをすばやく閲覧したり、長い記事をすばやく読んだりできるからです。 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 サイトの他の関連記事を参照してください。

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