Inhaltsverzeichnis
Die Anleitung zu Javascript WheelEvent
View more Tutorials:
Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt.
Facebook
WheelEvent ist eine Interface für die Vertretung der Events, die passieren wenn der Benutzer das Mausrad (mouse wheel) oder die ähnlichen Geräte bewegt.
Die Browser unterstützt WheelEvent:
WheelEventist die Sub-Interface von MouseEvent. Es wird alle Properties und Methode von Vater-Method geerbt.
| Event | Die Bezeichnung |
|---|---|
| wheel | Das Event passiert wenn das Mausrad (mouse wheel) auf ein Element heranrollt oder herunterrollt. |
Die Properties (property) vom WheelEvent:
| Property | Die Bezeichnung |
|---|---|
| deltaX | Die Anzahl der horizontalen Rollen des Mausrad (mouse wheel) (die Achse X) zurückgeben |
| deltaY | Die Anzahl der vertikalen Rollen des Mausrad (mouse wheel) (die Achse Y) zurückgeben |
| deltaZ | Die Anzahl der Rollen nach der Achse Z des Mausrad zurückgeben |
| deltaMode | Ein Zahl zurückgeben, die die Messungeinheit für die Wert delta (DOM_DELTA_PIXEL, DOM_DELTA_PIXEL, DOM_DELTA_PAGE) vertritt. |
Die Konstante:
| Die Konstante | Die Wert | Die Bezeichnung |
| DOM_DELTA_PIXEL | 0 | Die Messungseinheit von delta ist pixels. |
| DOM_DELTA_LINE | 1 | Die Messungseinheit von delta list lines. |
| DOM_DELTA_PAGE | 2 | Die Messungseinheit von delta ist pages. |
Zum Beispiel WheelEvent:
wheelevents-example.html
<!DOCTYPE html>
<html>
<head>
<title>WheelEvent Example</title>
<script src="wheelevents-example.js"></script>
</head>
<body>
<h3>WheelEvent example</h3>
<div style="font-size:12px; padding:5px; border:1px solid #ccc;"
onwheel="wheelHandler(event)">
Hello Everyone!
<div>
</body>
</html>
wheelevents-example.js
function wheelHandler(evt) {
var fontSize = evt.target.style.fontSize;// 12px, 13px,...
var value = Number(fontSize.substr(0, fontSize.length-2)); // 12, 13,..
// Scrolling up
if (evt.deltaY < 0) {
if(value < 50) {
value++;
}
}
// Scrolling down
if(evt.deltaY > 0) {
if(value > 5) {
value--;
}
}
evt.target.style.fontSize = value+"px";
}
*
