<< 6.9. Egérkattintás által kiváltott reakció

6.11. Elemek átrendezése „fogd és dobd” (drag and drop) módszerrel >>

6.10. Elemek lassú mozgatása

Az eddigiekben az elemeknek csupán olyan jellegű elmozgatásáról volt szó, mely azonnal megvalósult. Ezek a mozgások a mozgatni kívánt elem top és left tulajdonságainak változtatásával irányíthatóak. Egy elem lassú mozgatása csak úgy valósítható meg, ha ismételten elmozgatjuk egy keveset, a mozgatások közt rövid szünetet tartva. A JavaScript Window objektuma két eljárással rendelkezik, amelyek képesek ezt a feladatot megoldani: a semeout és a setInterval.

A setTimeout eljárásnak két paramétere van: egy végrehajtani kívánt JavaScript kódot tartalmazó karakterlánc, valamint egy milliszekundumokban megadott késés, ami megelőzi a megadott kód végrehajtását. Például a következő hívás:

setTimeout (“mover()”, 20) ;

egy 20 milliszekundumnyi késést eredményez, melyet követően meg lesz hívva a mover függvény.

A setInterval eljárásnak két alakja van. Az egyik esetben két paramétert adunk meg, pontosan úgy, ahogyan a setTimeout esetében. Ismételten végrehajtja a megadott kódot, két hívás között pedig a második paraméterként megadott (milliszekundumokban kifejezett) ideig vár. A setInterval második formája változó számú paramétert használ. Az első paraméter a meghívni kívánt függvény neve, a második milliszekundumokban kifejezett időintervallum, ami két függvényhívás között eltelik, míg a további paraméterek a meghívni kívánt függvény aktuális paramétereiként szolgálnak.

Az itt bemutatott példa, a moveText.html, egy rövid szöveget mozgat el egyik pozícióból (100, 100) a másikba (300, 300). A setTimeout segítségével milliszekundumonként meghívódik a mover függvény, mindaddig, ameddig a szöveg végső pozícióját (300, 300) el nem éri. A szöveg eredeti helyzetét a span elemben adtuk meg, amelybe a szöveg be van ágyazva. A body elem onload attribútumát használjuk az initText függvény meghívására, mely a szöveg kezdőpozíciójának x- és y koordinátáit az elem left illetve top tulajdonságai alapján inicializálja, majd meghívja a mover függvényt.

A moverText-nek nevezett mozgató függvény a szöveg aktuális koordinátáit kapja paraméterként, egy pixellel arrébb mozdítja a végső célpont felé, majd ezután, a setTimeout-ot használva, meghívja saját magát az új koordinátákkal. A koordináták kiértékelését bonyolítja, hogy azt szeretnénk, hogy a kód működjön a mozgás irányától függetlenül.

A parancsállománnyal kapcsolatban megfontolandó, hogy a koordináták tulajdonságai karakterláncként vannak tárolva, a számértékhez csatolt mértékegységgel. Például, ha egy elem kezdeti pozíciója (100, 100), akkor a left és a top tulajdonságok értéke mindkét esetben a “100px” karakterlánc. Ahhoz, hogy az értékeket aritmetikailag meg lehessen változtatni, ezek számok kell legyenek. Ezért a tulajdonság értékeket kizárólag numerikus karaktereket tartalmazó karakterlánccá alakítjuk át az initText függvényben, levágva a nem numerikus részt. Ez az átalakítás lehetővé teszi, hogy számmá legyenek konvertálva, amikor aritmetikai művelet operandusaiként szerepelnek. Mielőtt a left és a top tulajdonságokat beállítanánk az új értékekkel, a mértékegység rövidítését (ebben az esetben a “px” végződést) ismét hozzáfűzzük a koordinátaértékekhez.

A példa egyik érdekessége, hogy az eseménykezelő külön állományba való elhelyezése megoldja azt a problémát, amelyik akkor jelentkezett volna, ha a JavaScript a jelölőnyelve lenne beágyazva. A probléma az XHTML megjegyzések használata a JavaScript elrejtése érdekében, illetve, hogy a JavaScriptbe XHTML megjegyzés keveredhet. Például, ha az x--; JavaScript kifejezést beágyazzuk egy XHTML megjegyzésbe, a helyességellenőrző hibát jelezhet, miszerint a -- a kifejezésben érvénytelen megjegyzésdeklaráció.

A moveTextfuns.js állományban figyeljük meg a moveText függvényhívás komplex voltát a setTimeout hívásban. Erre azért van szükség, mert a moveText hívása statikus karakterláncok összefűzéséből épül fel, melyben az x és y változók értékei szerepelnek.

A moveText.html dokumentum és a hozzá tartozó moveText.js nevű JavaScript állomány a következő:

A 6.12. ábra a moveText.html dokumentumot jeleníti meg:

Ugrás az oldal tetejére