Utilisez HTML5 pour réaliser la fonction de l'agrandissement et de la réduction des images avec des événements de roue de souris

Vous et moi savons que l'ajout d'événements de roues de souris aux pages Web HTML5 peut mieux permettre aux utilisateurs d'interagir avec les pages Web. Dans HTML5, la roue de défilement de la souris ne peut pas seulement glisser de haut en bas de la page Web. En fait, vous pouvez également compter sur cela pour remplir plus de fonctions, telles que l'agrandissement et la réduction du champ de vision du champ.

Découvrez l'effet de démonstration réel

La plupart des navigateurs prennent en charge les événements de roue de souris, vous pouvez donc d'abord vous abonner à la méthode des événements de roue de souris. Chaque fois que l'événement est déclenché, vous pouvez obtenir une propriété appelée Wheeldelta, qui représente la taille de la roue de la souris qui vient de changer. Une valeur positive indique que la roue de défilement glisse vers le bas et une valeur négative indique que la roue de défilement glisse vers le haut. Plus la valeur absolue de la valeur est grande, plus la plage de glissement.

Malheureusement, il y a encore un navigateur qui ne prend pas en charge les événements de roue de souris. C'est Firefox. Mozilla a implémenté le traitement d'un événement appelé DomMousescroll, qui passera un paramètre d'événement nommé événement avec une propriété appelée Detail. Cependant, cette propriété détaillée est différente de Wheeldelta, qui ne peut renvoyer que des valeurs positives, c'est-à-dire qu'elle ne peut qu'insister sur la valeur de la roue de la souris à la baisse.

Vous devez prêter une attention particulière qu'Apple a également désactivé le défilement de la souris pour contrôler la page qui glisse et vers le bas dans le navigateur Safari, mais cette fonction est toujours utilisée normalement dans le moteur WebKit, de sorte que le code que vous écrivez ne déclenchera aucun problème.

Tout d'abord, nous ajoutons une image à la page Web, et nous pouvons utiliser la roue de la souris pour contrôler le zoom de cette image plus tard.