Exemple de code pour JavaScript pour implémenter le contrôle de la molette de la souris pour le changement d'image de page-js tutoriel-php.cn

Exemple de code pour JavaScript pour implémenter le contrôle de la molette de la souris pour le changement d'image de page

黄舟

Libérer： 2017-10-16 11:10:51

original

1600 Les gens l'ont consulté

Cet article présente principalement JavaScript pour implémenter la fonction de changement d'image de la page de contrôle de la molette de la souris, impliquant la réponse aux événements JavaScript et le fonctionnement dynamique des techniques d'implémentation liées aux éléments de page. Les amis dans le besoin peuvent s'y référer

Cet article décrit le. Implémentation JavaScript avec exemples La molette de la souris contrôle la fonction de changement d'image de page. Partagez-le avec tout le monde pour référence, les détails sont les suivants :

La molette de défilement de la souris est une bonne chose, pourquoi je dis cela, car elle peut nous aider à naviguer rapidement sur le Web et à lire de longs articles rapidement. Pour nous, utilisateurs du front-end du Web, comment pouvons-nous ne pas prêter attention à cette molette de la souris. Alors, comment peut-elle permettre aux utilisateurs de mieux naviguer sur le Web ?

La chose la plus courante est de changer d'image. Vous pouvez parcourir les images en faisant défiler la molette, ce qui évite à l'utilisateur d'avoir à cliquer sur l'image suivante et à effectuer des étapes aussi fastidieuses. Regardons un exemple simple.

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

Copier après la connexion

Concentrez-vous sur le code js. Différents navigateurs ont des événements de molette de souris différents. Pour parler franchement, il s'agit d'un problème de compatibilité. 🎜 >onmousewheel(IE/Opera/Safari/Chrome) et DOMMouseScroll(Firefox) Si vous souhaitez être compatible avec Firefox, vous devez utiliser addEventListener pour écouter ceci. La fonction a 3 paramètres, , type est le type de clic, focus..., et l'auditeur peut directement écrire la méthode function(){}, ou il peut appeler le corps de la méthode écrite, comme dans mon exemple. useCapture est une valeur booléenne, avec uniquement true et false, indiquant la séquence de réponse de l'événement. Si false est sélectionné, la méthode de bouillonnement est utilisée, et si true est sélectionnée, la méthode Capture est utilisée. Il y aura une explication détaillée de addEventListener plus tard. addEventListener(type,listener,useCapture)

Dans la méthode MouseWheel, e.wheelDelta est compatible avec d'autres navigateurs tels que IE Chaque fois que la molette défile, elle renvoie +3/-3 (défilement vers le haut/bas), tandis que e.detail l'est. compatible avec le navigateur Firefox Lorsque la molette de défilement défile une fois, elle renvoie +120/-120 (faire défiler vers le haut/faire défiler vers le bas). Ces valeurs renvoyées peuvent être utilisées pour déterminer s'il faut faire défiler vers le haut ou vers le bas. La boucle for masque et affiche uniquement les images dans l'ordre. Je pense que ce n'est pas difficile à comprendre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!