C# - Mozgó reklámcsík weblapon

forráskód letöltése
Számtalan módja van annak, hogy az oldalunkra látogatónak felkeltsük az érdeklődését. Talán az összes lehetőség közül a mozgó információhordozók a legalkalmasabbak erre. Cikkünkben bemutatunk egy lehetséges megoldást ebben a témakörben. A mozgó információs panelen természetesen tetszőleges tartalom elhelyezhető, a képektől a linkekig.
Mellékelt példa megnyitása előtt szükséges egy MoveDiv 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.
A mozgó kontrol egy DIV elem, melyben elhelyeztünk egy Label és egy HyperLink kontrolt. A mozgatás automatikusan elindul a lap betöltődésekor. Ennek érdekében az indító JavaScript függvényt a <BODY> tag onload attribútumában helyeztük el.
A műveletet azzal kezdjük, hogy deklarálunk néhány globális változót, melyeket a függvényekben használunk.
var top = 100;
var left = -300;
var speed = 4;
A doReady függvény végzi az alaphelyzetbe állítást, majd a mozgás elindítását.
function doReady()
{
  infobox.style.top = top;
  infobox.style.left = left;
  doMove();
}
A mozgatás a doMove függvénnyel történik.
function doMove()
{
A függvényben megvizsgáljuk, hogy a mozgó DIV kontrol baloldali pozíciója elérte-e a képernyő kliensterületének jobb szélső pontját. Amennyiben nem, akkor mozgatunk 4 pixelt a kontrolon jobbra.
  if (infobox.style.pixelLeft <= document.body.clientWidth)
    infobox.style.pixelLeft += speed;
  else
  {
Egyéb esetben az alaphelyzetbe állítás következik, majd innen a mozgás újraindítása.
    top = 100;
    left = -300;
    doReady();
    return;
  }
A kontrol mozgását az időzítő függvény segítségével ütemezzük, mely 0,05 másodpercenként lefuttatja a doMove függvényt.
  moveid = setTimeout("doMove()",50)
}
A kurzort a kontrol fölé mozgatva elérhetjük, hogy a kontrol megálljon. Ekkor a doPause függvény hívódik meg, mely megszünteti az időzítést.
function doPause()
{
  clearTimeout(moveid);
}
Majd az egérkurzort elmozgatva a területéről a kontrol ismét elindul.
function doContinue()
{
  doMove();
}
A kontrol HTML-kódjában az onmouseover attribútumban helyeztük el a doPause függvényt, az onmouseout attribútumban pedig a doContinue függvényt kezelőként. A doReady függvény kerül a body tag onload attribútumába.