Verwenden von HTML5 zum Implementieren der Funktion zum Vergrößern und Verkleinern von Bildern mithilfe von Mausrad-Events_html5-Tutorial-Fähigkeiten

Sie und ich wissen beide, dass das Hinzufügen von Mausradereignissen zu HTML5-Webseiten den Benutzern eine bessere Interaktion mit der Webseite ermöglichen kann. In HTML5 kann das Mausrad nicht nur die Webseite nach oben und unten verschieben, sondern Sie können sich auch darauf verlassen, dass weitere Funktionen ausgeführt werden, beispielsweise das Vergrößern und Verkleinern der Ansichtsebene.

Sehen Sie sich den tatsächlichen Demonstrationseffekt an
Die meisten Browser unterstützen Mausrad-Ereignisse. Sie können also zuerst die Mausrad-Ereignismethode abonnieren, wenn das Ereignis ausgelöst wird. Ein Attribut namens WheelDelta , was die Größe des gerade geänderten Mausrads darstellt, wobei ein positiver Wert bedeutet, dass das Rad nach unten gleitet, und ein negativer Wert bedeutet, dass das Rad nach oben gleitet. Je größer der Absolutwert des Wertes ist, desto größer ist der Gleitbereich.

Aber leider gibt es immer noch einen Browser, der keine Mausrad-Ereignisse unterstützt. Das ist Firefox. Mozilla hat eine Ereignisverarbeitung namens „DOMMouseScroll“ implementiert, die einen Ereignisparameter namens „event“ mit einem Detailattribut übergibt. Dieses Detailattribut unterscheidet sich jedoch von „wheelDelta“, es kann nur positive Werte zurückgeben des Mausrads, das nach unten scrollt.

Sie sollten besonders darauf achten, dass Apple auch das Scrollen mit der Maus deaktiviert hat, um das Auf- und Abwärtsschieben der Seite im Safari-Browser zu steuern. Diese Funktion wird jedoch weiterhin normal in der Webkit-Engine verwendet, sodass der von Ihnen geschriebene Code keine Auslösung auslöst Probleme.

Mausrad-Ereignisbehandlungsmethode hinzufügen
Zuerst fügen wir der Webseite ein Bild hinzu, und später können wir das Mausrad verwenden, um den Zoom des Bildes zu steuern

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <img id="myimage" src="myimage.jpg" alt="mein Bild" />

Fügen Sie nun den Mausrad-Ereignisbehandlungscode hinzu

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. var myimage = document.getElementById("myimage"); >
if (myimage.addEventListener) {
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
4. // Firefox
5. myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);
9. Um verschiedene Browser zu unterstützen
Im folgenden Fall invertieren wir den Firefox-Detailwert und geben einen von 1 oder -1 zurück

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1. fonction MouseWheelHandler(e) {
2. // Delta de la roue multi-navigateurs
3. var e = window.event || // ancien support d'IE
4. var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.détail)));

Maintenant, nous déterminons directement la plage de tailles de l'image. Le code suivant définit la plage de largeur de l'image entre 50 et 800 pixels

Code XML/HTMLCopier le contenu dans le presse-papiers

1.  myimage.style.width = Math.max(50, Math.min(800 , monimage.width (30 * delta))) "px"
2. renvoie faux
3. }

Dernier point, nous renvoyons false dans la méthode pour terminer le traitement standard des événements de la molette de la souris pour l'empêcher de faire glisser la page Web de haut en bas.
Voir la démonstration réelle