マウスホイール制御ページ画像切り替え機能のJavaScript実装例-jsチュートリアル-php.cn

マウスホイール制御ページ画像切り替え機能のJavaScript実装例

韦小宝

リリース： 2018-01-12 09:55:02

オリジナル

1855 人が閲覧しました

この記事では主に、マウスホイールコントロールのページ画像切り替え機能を実装するための JavaScript を紹介します。これには、 JavaScript イベント応答と、ページ要素の動的な操作に関連する実装テクニックが含まれます。この記事では、JavaScript がマウスホイールコントロールのページ画像切り替え機能を実装する例について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

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

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

<!DOCTYPE html>
<html>
<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で実装された簡単なフォーム検証関数の例

JSで表示コンテンツのクリックサイクル切り替えを実装する方法

jsプッシュボックスミニゲーム実装チュートリアル

以上がマウスホイール制御ページ画像切り替え機能のJavaScript実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。