JavaScript implémente le changement d'image de la page de contrôle de la molette de la souris-tutoriel HTML-php.cn

JavaScript implémente le changement d'image de la page de contrôle de la molette de la souris

小云云

Libérer： 2018-01-29 10:27:12

original

2123 Les gens l'ont consulté

La molette de défilement de la souris est une bonne chose. Pourquoi je dis cela Parce qu'elle peut nous aider à naviguer rapidement sur le 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 ? 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 la page. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

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é. 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, auditeur, 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 masque et affiche uniquement 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.

Recommandations associées :

Problème de taille de police de la page de contrôle JS_html/css_WEB-ITnose

Notes d'étude jQuery Implémentation de la page de contrôle code_jquery

js 5 façons de contrôler les compétences de saut de page_javascript

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!