Verwenden Sie HTML5, um die Funktion des Vergrößers und Reduzierens von Bildern mit Mausradereignissen zu erkennen

Sie und ich wissen, dass das Hinzufügen von Mausradereignissen zu HTML5 -Webseiten es Benutzern besser ermöglichen kann, mit Webseiten zu interagieren. In HTML5 kann das Maus -Scroll -Rad nicht nur die Webseite nach oben und unten rutschen. Tatsächlich können Sie sich auch darauf verlassen, dass weitere Funktionen wie das Vergrößern und die Reduzierung des Sichtfelds ausführen.

Schauen Sie sich den tatsächlichen Demonstrationseffekt an

Die meisten Browser unterstützen Mausradveranstaltungen, sodass Sie zuerst die Maus -Rad -Event -Methode abonnieren können. Immer wenn das Ereignis ausgelöst wird, können Sie eine Eigenschaft namens Wheeldelta erhalten, die die Größe des Mausrads darstellt. Ein positiver Wert zeigt an, dass das Bildlaufrad nach unten gleitet und ein negativer Wert angibt, dass das Bildlaufrad nach oben gleitet. Je größer der absolute Wert des Wertes ist, desto größer ist der Gleitbereich.

Leider gibt es immer noch einen Browser, der Mausradveranstaltungen nicht unterstützt. Das ist Firefox. Mozilla hat die Verarbeitung eines Ereignisses namens DommouSeScroll implementiert, das einen Ereignisparameter mit dem Namen einer Eigenschaft namens Detail übergeben wird. Diese Detaileigenschaft unterscheidet sich jedoch von Wheeldelta, was nur positive Werte zurückgeben kann, dh sie kann nur auf dem Wert des Mausrad -Scrollens nach unten bestehen.

Sie sollten besonders darauf achten, dass Apple im Safari -Browser auch die Maus -Scrollen zur Steuerung von Seite deaktiviert hat. Diese Funktion wird jedoch immer noch normalerweise in der Webkit -Engine verwendet, sodass der von Ihnen geschriebene Code keine Probleme auslöst.

Zunächst fügen wir der Webseite ein Bild hinzu und können das Mausrad verwenden, um den Zoom dieses Bildes später zu steuern.