C# - ASP.NET lapon található kép méretének változtatása az egér görgőjével

forráskód letöltése
Windows-os alkalmazásainkban szinte a kezdetektől használható, Webes alkalmazásainkban azonban csak az Internet Explorer 6-os verziójában elérhető az a funkció, mely mostani cikkünk témájául szolgál. Nevezetesen arról az eseményről, és annak kezeléséről van szó, mely az egér görgőjének használatakor következik be. Ennek neve onmousewheel, melynek felhasználását egy gyakorlati példán keresztül mutatjuk be.
Mellékelt példa megnyitása előtt szükséges egy ScriptMouseWheel nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
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 Label kontrolban 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 WebForm1.aspx 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:
<SCRIPT>
  var count = 10;
Az onmousewheel eseményt a Picture függvényünk fogja lekezelni, 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;
  }
</SCRIPT>