Maison > Article > interface Web > Exemple de code pour JavaScript pour implémenter le contrôle de la molette de la souris pour le changement d'image de page
Exemple de code pour JavaScript pour implémenter le contrôle de la molette de la souris pour le changement d'image de page
- 黄舟original
- 2017-10-16 11:10:511535parcourir
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>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)
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!