recherche

Maison >interface Web >js tutoriel >Exemple d'implémentation JavaScript de la fonction de changement d'image de la page de contrôle de la molette de la souris

Exemple d'implémentation JavaScript de la fonction de changement d'image de la page de contrôle de la molette de la souris

韦小宝
韦小宝original
2018-01-12 09:55:021910parcourir

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 une réponse événement javascript et des techniques d'implémentation associées pour le fonctionnement dynamique des éléments de la page. avec JavaScript peut s'y référer. L'article suivant

L'exemple de cet article décrit l'implémentation JavaScript de la fonction de changement d'image de la page de contrôle de la molette de la souris. 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>
<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>

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é. Il existe principalement deux types de molette de souris (IE/Opera/Safari/Chrome). et DOMMouseScroll (Firefox), si vous souhaitez être compatible avec Firefox, vous devez utiliser addEventListener pour écouter. Cette fonction a 3 paramètres, addEventListener (type, écouteur, useCapture), le type est clic, focus... type, et l'auditeur peut. écrivez directement les méthodes function(){}, vous pouvez également 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.

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 cache et affiche simplement les images dans l'ordre. Je pense que ce n'est pas difficile à comprendre.

Recommandations associées :

Exemple de fonction de validation de formulaire simple implémentée par JS

Méthode JS d'implémentation du changement de cycle de clic pour afficher le contenu

Tutoriel d'implémentation du mini-jeu JS push box


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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tutoriel sur le style CSS des opérations jQueryArticle suivant：Tutoriel sur le style CSS des opérations jQuery

Articles Liés

Voir plus