TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Dnes bych vám chtěl ukázat, jak pomocí JavaScriptu můžeme udělat jednodušší animaci.
Chtěl bych ukázat tři možnosti animace zleva, shora a z obou stran naráz.
Nejdříve si uděláme normální html stránku, do které vložíme nasledující kód.
<body onload="lev('jed',-200,0,1,1)">
<img src="1.gif" id="jed" style="position: absolute; left: 0px; top: 0px; weight: 200px; height: 200px;">
</body>
Tohle se dosadí do funkce:
jed - Dosadí se za jme..
-200 - Kde je start prvku od jeho normální pozice.
0 - Kde je konec prvku od jeho normální pozice.
1 - O kolik pixelu se bude posouvat.
1 - Jak a za jaký čas se prvek posune o námi určený počet pixelů.
Přečtěte si to celé, ať to pochopíte !
Toto bude platit v každém ze tří scriptů.
zac="document.getElementById";
end=".style";
Začneme tedy animací zleva.
function lev(jme, sta, kon, pos, rych){
if (sta < kon){ //Podmínka start musí být menší než konec.
//když to tak není, nic se nestane
//a zůstane tam kde je.
eval(zac + '("' + jme + '")' + end + '.left = sta');
sta=sta+pos;
setTimeout("lev('"+jme+"',"+sta+","+kon+","+pos+","+rych+")",rych);
}
}
Tady popíši, co co znamená:
lev - Pojmenování funkce.
jme - Je identifikace toho prvku, neboli jeho id, které je jed.
sta - Kolik pixelů od mista, na kterém je normálně, bude startovat.
kon - Na kolika pixelech, od jeho mista id="jed", bude startovat.
pos - O kolik pixelů se bude posouvat za námi určený čas.
rych - Ten náš čas. Ale pozor je to v ms což znamená 1s=1000ms.
eval - Po každém spustění funkce přepočítá pozici.
sta=sta+pos; může to být i takhle zapsané: sta += pos; - Díky tomuhle se to posune o námi určený počet pixelů.
setTimeout - Naše časování-platí,že čím menší číslo, tím větší rychlost. A dosadí se sem rych.
Tahle pojede zvrchu a dá se říct, že všechno platí stejně jako u předchozího scriptu, jenže to pojede zezhora.
function hor(jme, sta, kon, pos, rych){
if (sta < kon){
eval(zac + '("' + jme + '")' + end + '.top = sta');
sta=sta+pos;
setTimeout("hor('"+jme+"',"+sta+","+kon+","+pos+","+rych+")",rych);
}
}
Platí to samé, ale přijede z obou stran najednou a uvědomte si, že to pojede na left i top, takže bude platit left=top.
function oboje(jme, sta, kon, pos, rych){
if (sta < kon){
eval(zac + '("' + jme + '")' + end + '.top = sta');
eval(zac + '("' + jme + '")' + end + '.left = sta');
sta=sta+pos;
setTimeout("oboje('"+jme+"',"+sta+","+kon+","+pos+","+rych+")",rych);
}
}
Radši si to zkuste, ať uvidíte jak to vypadá.
