recherche

Maison >interface Web >js tutoriel >Utilisez JS pour implémenter le changement d'image de page de liaison avec la molette de la souris

Utilisez JS pour implémenter le changement d'image de page de liaison avec la molette de la souris

php中世界最好的语言
php中世界最好的语言original
2018-04-17 15:15:321603parcourir

Cette fois, je vais vous présenter comment utiliser JS pour changer l'image sur la page liée par la molette de la souris. Quelles sont les précautions concernant l'utilisation de JS pour changer l'image sur la page liée par la molette de la souris. molette de la souris. Ce qui suit est un cas pratique. Jetons un coup d'oeil.

La molette de défilement de la souris est une bonne chose. Pourquoi est-ce que je dis cela ? Parce qu'elle peut nous aider à parcourir rapidement les pages Web et à lire rapidement de longs articles. Pour nous qui sommes sur le 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 solution la plus courante consiste à changer d'image. Vous pouvez parcourir les images en faisant défiler la molette, ce qui évite à l'utilisateur de devoir cliquer sur l'image suivante et d'effectuer des étapes 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>

Concentrons-nous sur le code js. Différents navigateurs ont des événements de molette de souris différents. Pour parler franchement, il existe deux types principaux, onmousewheel(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, , tapez c'est clic, focus... type et écouteur Vous pouvez écrire la méthode function(){} directement, ou vous pouvez 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 roue tourne, elle renvoie +3/-3 (défilement vers le haut/bas), tandis que e.detail est compatible avec le navigateur Firefox, et chaque fois que la roue tourne, 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.

Vous êtes invités à corriger toute erreur ou omission dans l’article.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Débogage normal inter-domaines Vue

Explication détaillée du polymorphisme en JS

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：Utiliser JS pour implémenter la validation de formulaire (avec code)Article suivant：Utiliser JS pour implémenter la validation de formulaire (avec code)

Articles Liés

Voir plus