Artikeleinführung von Wulin.com (www.vevb.com): Wie verwendet HTML5 Mausradereignisse?
Durch das Hinzufügen von Mausradereignissen zu HTML5 -Webseiten können Benutzer besser mit Webseiten 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.
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.
Fügen Sie Mausradveranstaltungsmethode hinzu
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.
<img id = myimage src = myimage.jpg Alt = mein Bild />
Fügen Sie nun den Verarbeitungscode für Mausrad -Ereignisverarbeitungscode hinzu
var myimage = document.getElementById (MyImage);
if (myimage.addeventListener) {
// IE9, Chrome, Safari, Opera
myimage.addeventListener (Mausrad, Mausrad, Falsch);
// Firefox
myimage.addeventListener (DommouSeScroll, Mauswheelhandler, False);
}
// dh 6/7/8
sonst myimage.attachEvent (Onmousewheel, Mauskala);
Verarbeitungspraktiken, die von verschiedenen Browsern unterstützt werden können
Im folgenden Fall werden wir den Detailwert von Firefox inversen und einen von 1 oder -1 zurückgeben
Funktion Mauswheelhandler (e) {
// Cross-Browser Wheel Delta
var e = window.event || e; // alter IE -Unterstützung
var delta = math.max (-1, math.min (1, (e.wheelldelta || -e.detail)));
Jetzt entscheiden wir direkt den Größenbereich des Bildes. Der folgende Code legt den Breitenbereich des Bildes zwischen 50 und 800 Pixel fest
myimage.style.width = math.max (50, math.min (800, myimage.width + (30 * Delta))) + px;
false zurückgeben;
}
Letzter Punkt, wir geben in der Methode FALSE zurück, um die Standard -Maus -Rad -Ereignisverarbeitung zu beenden, falls sie auf der Webseite nach oben und unten gleitet.