codestory

Die Anleitung zu Javascript WheelEvent

  1. WheelEvent

1. WheelEvent

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.
  • Javascript UiEvent
  • Hướng dẫn và ví dụ Javascript Event
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";

}

Anleitungen ECMAScript, Javascript

Show More

Anleitungen ECMAScript, Javascript

Show More