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