Utiliser HTML5 pour implémenter la fonction de zoom avant et arrière sur les images à l'aide de la molette de la souris. compétences du didacticiel events_html5

Vous et moi savons tous les deux que l'ajout d'événements de molette de la souris aux pages Web HTML5 peut mieux permettre aux utilisateurs d'interagir avec la page Web. En HTML5, la molette de la souris peut non seulement faire glisser la page Web de haut en bas, mais vous pouvez également compter sur elle pour effectuer davantage de fonctions, telles que zoomer et dézoomer sur le plan de vue.

Regardez l'effet de démonstration réel
La plupart des navigateurs prennent en charge les événements de la molette de la souris, vous pouvez donc d'abord vous abonner à la méthode des événements de la molette de la souris. Chaque fois que l'événement est déclenché, vous pouvez obtenir un attribut nommé wheelDelta. , qui représente la taille de la molette de la souris qui vient d'être modifiée, où une valeur positive signifie que la molette glisse vers le bas et une valeur négative signifie que la molette glisse vers le haut. Plus la valeur absolue de la valeur est grande, plus la plage mobile est grande.

Mais malheureusement, il existe toujours un navigateur qui ne prend pas en charge les événements de la molette de la souris. C'est FireFox. Mozilla a implémenté un traitement d'événement appelé "DOMMouseScroll", qui transmettra un paramètre d'événement nommé event avec un attribut de détail. Cependant, cet attribut de détail est différent de wheelDelta, il ne peut renvoyer que des valeurs positives. de la molette de la souris défilant vers le bas.

Vous devez prêter une attention particulière au fait qu'Apple a également désactivé le défilement de la souris pour contrôler le glissement des pages de haut en bas dans le navigateur Safari, mais cette fonction est toujours utilisée normalement dans le moteur du kit Web, donc le code que vous écrivez ne se déclenchera pas. des problèmes.

Ajouter une méthode de gestion des événements avec la molette de la souris
Nous ajoutons d'abord une image à la page Web, et plus tard, nous pouvons utiliser la molette de la souris pour contrôler le zoom de l'image

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <img id="monimage" src="monimage.jpg" alt="mon image" />

Ajoutez maintenant le code de gestion des événements de la molette de la souris

Code XML/HTMLCopier le contenu dans le presse-papiers

1. var monimage = document.getElementById("monimage"); >
if (myimage.addEventListener) {
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
6. }
7. //IE 6/7/8
8. else myimage.attachEvent("onmousewheel", MouseWheelHandler);

Afin de prendre en charge différents navigateurs

Dans le cas suivant, nous inverserons la valeur détaillée de Firefox et renverrons l'une des valeurs 1 ou -1

Code XML/HTML

Copier le contenu dans le presse-papiers

1. 関数 MouseWheelHandler(e) {
2. // クロスブラウザホイールデルタ
3. var e = window.event || 古い IE サポート
4. var delta = Math.max(-1, Math.min(1, (e.wheelDelta) || -e.detail)));

ここで、画像のサイズ範囲を直接決定します。次のコードは、画像の幅の範囲を 50 ～ 800 ピクセルに設定します

XML/HTML コード

コンテンツをクリップボードにコピー

1. myimage.style.width = Math.max(50, Math.min(800) 、myimage.width (30 * デルタ))) "px"; は false を返します。 }
3. 最後のポイントは、Web ページが上下にスライドするのを防ぐために、標準のマウス ホイール イベント処理を終了するメソッドで false を返します。 実際のデモを見る