A mellékelt példa megnyitása előtt szükséges egy Sample nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez futtassa le a mellékelt CreateVD.js parancsállományt.
Ahogy említettük, a lehetőség az Explorer legújabb, 6-os verziójában érhető el. Az esemény egy event objektum, csakúgy, mint a script-események mindegyike, azonban csak ez az esemény használja az objektum wheelDeta property-jét, mely arra szolgál, hogy jelezze az egér görgőjének aktuális mozgásirányát, valamint, hogy éppen mekkora távolságot tett meg a görgő egy adott pontja a képzeletbeli köríven.
Értéke pozitív vagy negatív, attól függően, hogy a görgőt a felhasználó milyen irányba mozgatja. Az érték pozitív, ha a görgetés előre (felhasználótól távolodó mozgás), és negatív, ha a görgetés visszafelé történik. Értéke mindig 120 egész számú többszöröse, ahol az egész szám jelenti az egy görgetési ciklusban megtett 120 fokos ívek számát.
Az esemény többi property-je nagyrészt arra szolgál, hogy lekérdezzük az esemény bekövetkezésekor a gombok aktuális állapotát, illetve az egér pozícióját.
A mellékelt példában az esemény bekövetkezését egy kép esetében modellezzük, ahol a <BODY> tag onmousewheel eseménykezelője egy függvény lesz, melyben nagyítjuk vagy kicsinyítjük a képet, az egér görgőjének mozgásával összhangban. A kép fölött elhelyezett címkén megjelenítjük a wheelDelta property értékét, így követhetjük, hogy éppen hány 1/3-ad ívnyi görgetést végeztünk.
A Test.htm lap HTML-kódjában meg kell alkotnunk a JavaScript függvényt, mely kezeli az eseményt. Kezdjük a kódot egy globális script-változó deklarálásával, melynek aktuális értékét használjuk a kép méretének megváltoztatásához:
Az onmousewheel eseményt a Picture függvényünk kezeli le, melyben egyrészt megváltoztatjuk a count változó értékét, majd ezzel a számmal megváltoztatjuk a kép aktuális méretét. Előbbire szolgál a Counting metódus:
function Counting(count)
{
if (event.wheelDelta >= 120)
{
count++;
}
else if (event.wheelDelta <= -120)
{
count--;
}
return count;
}
A függvényben a wheelDelta értékétől függően csökkentjük a count értékét. A kép méretének megváltoztatásához a Resize függvényt írjuk meg:
function Resize(count)
{
document.all["myImg"].style.zoom = count + '0%';
document.all["Label2"].innerText = "wheelDelta property értéke: " + event.wheelDelta + " , görgetésszám: " + Math.abs(event.wheelDelta/120);
}
Itt a kép stílusának zoom property-jét változtatva érjük el, hogy a méret megváltozzon.
A Picture metódusban csak meghívjuk ezeket a függvényeket:
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}