Heim > Artikel > Web-Frontend > Verwenden Sie JS, um den Seitenbildwechsel mit der Mausradbindung zu implementieren

Verwenden Sie JS, um den Seitenbildwechsel mit der Mausradbindung zu implementieren

php中世界最好的语言Original: 2018-04-17 15:15:321547Durchsuche

Dieses Mal werde ich Ihnen vorstellen, wie Sie mit JS das Bild auf der durch das Mausrad gebundenen Seite wechseln. Welche Vorsichtsmaßnahmen gibt es bei der Verwendung von JS zum Wechseln des Bildes auf der durch das Mausrad gebundenen Seite? Das Folgende ist ein praktischer Fall.

Das Scrollrad an der Maus ist eine gute Sache, weil es uns dabei helfen kann, schnell durch Webseiten zu blättern und lange Artikel zu lesen. Wie können wir im Web-Frontend diesem Mausrad keine Beachtung schenken? Wie kann es Benutzern also ermöglichen, besser im Internet zu surfen?

Die häufigste Methode besteht darin, Bilder zu wechseln, indem Sie mit dem Rad scrollen, sodass der Benutzer nicht auf das nächste Bild klicken und solche mühsamen Schritte ausführen muss. Schauen wir uns ein einfaches Beispiel an.

<!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>

Konzentrieren wir uns auf den js-Code. Um es ganz klar auszudrücken: Es gibt zwei Haupttypen: onmousewheel(IE/Opera/Safari/Chrome) und DOMMouseScroll(Firefox), wenn Sie mit Firefox kompatibel sein möchten, sollten Sie addEventListener zum Abhören verwenden: addEventListener(type,listener,useCapture), Typ ist Klicken, Fokus... Typ und Listener Sie können die Methode function(){} direkt schreiben oder den geschriebenen Methodenkörper aufrufen, wie in meinem Beispiel. useCapture ist ein boolescher Wert mit nur „true“ und „false“, der die Antwortsequenz des Ereignisses angibt. Wenn „false“ ausgewählt ist, wird die Bubbling-Methode verwendet, und wenn „true“ ausgewählt ist, wird die Capture-Methode verwendet. Eine ausführliche Erläuterung von addEventListener folgt später.

Bei der MouseWheel-Methode ist e.wheelDelta mit anderen Browsern wie dem IE kompatibel. Jedes Mal, wenn das Rad gedreht wird, gibt es +3/-3 zurück (nach oben/unten scrollen), während e.detail mit dem Firefox-Browser kompatibel ist Jedes Mal, wenn das Rad gerollt wird, werden +120/-120 (nach oben/nach unten scrollen) zurückgegeben. Diese zurückgegebenen Werte können verwendet werden, um zu bestimmen, ob nach oben oder unten gescrollt werden soll. Die for-Schleife verbirgt und zeigt Bilder einfach der Reihe nach an. Ich glaube, das ist nicht schwer zu verstehen.

Sie können Fehler oder Auslassungen im Artikel gerne korrigieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue Cross-Domain Normal Debugging

Detaillierte Erklärung des Polymorphismus in JS

Das obige ist der detaillierte Inhalt vonVerwenden Sie JS, um den Seitenbildwechsel mit der Mausradbindung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie JS, um die Formularvalidierung zu implementieren (mit Code)Nächster Artikel：Verwenden Sie JS, um die Formularvalidierung zu implementieren (mit Code)

In Verbindung stehende Artikel

Mehr sehen