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.
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.