codestory

Die Anleitung zu Javascript WheelEvent

View more Tutorials:

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.
  • TODO Link!
  • TODO Link!
EventDie Bezeichnung
wheelDas Event passiert wenn das Mausrad (mouse wheel) auf ein Element heranrollt oder herunterrollt.
Die Properties (property) vom WheelEvent:
PropertyDie Bezeichnung
deltaXDie Anzahl der horizontalen Rollen des Mausrad (mouse wheel) (die Achse X) zurückgeben
deltaYDie Anzahl der vertikalen Rollen des Mausrad (mouse wheel) (die Achse Y) zurückgeben
deltaZDie Anzahl der Rollen nach der Achse  Z des Mausrad zurückgeben
deltaModeEin Zahl zurückgeben, die die Messungeinheit für die Wert delta (DOM_DELTA_PIXEL, DOM_DELTA_PIXEL, DOM_DELTA_PAGE) vertritt.
Die Konstante:
Die KonstanteDie Wert
Die Bezeichnung
DOM_DELTA_PIXEL0Die Messungseinheit von delta ist pixels.
DOM_DELTA_LINE1
Die Messungseinheit von delta list lines.
DOM_DELTA_PAGE2Die 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";

}

 

View more Tutorials: