Animace - JavaScript
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Animace - JavaScriptAnimace - JavaScript

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

Animace - JavaScript

Google       Google       24. 12. 2005       17 045×

Dnes bych vám chtěl ukázat, jak pomocí JavaScriptu můžeme udělat jednodušší animaci.

Reklama
Reklama

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>
Můžete to použít do mnoha jiných tagů.

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

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

2 názory  —  2 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
Autor dělá weby v HTML a CSS.

Nové články

Reklama
Reklama
Obrázek ke článku Pracujete u počítače ve stoje? Dbejte na správné držení těla

Pracujete u počítače ve stoje? Dbejte na správné držení těla

Práce ve stoje je jedna z variant, jak změnit polohu těla při dlouhodobé práci u počítače. Především je důležité nezapomínat na správné držení těla, abychom při práci nenamáhali naší krční páteř. Primářka MUDr. Michaela Tomanová představí hlavní bonusy a rizika práce u počítače ve stoje.

Obrázek ke článku Firmy musejí s nástupem Průmyslu 4.0 více dbát na kyberbezpečnost. V ohrožení je i jejich know-how.

Firmy musejí s nástupem Průmyslu 4.0 více dbát na kyberbezpečnost. V ohrožení je i jejich know-how.

Destabilizace firmy či ukradené know-how. To jsou možná hlavní budoucí rizika spojená s nedostatečnou kybernetickou bezpečností průmyslových firem, na která upozorňují experti. Vzhledem k postupující digitalizaci výrobních či technologických procesů a přechodu k takzvanému Průmyslu 4.0 může těchto hrozeb postupně přibývat. Varují před nimi i nejnovější průzkumy. 

Obrázek ke článku Nový CEBIT je připraven: Pochopit digitální dnešek a objevit digitální zítřek

Nový CEBIT je připraven: Pochopit digitální dnešek a objevit digitální zítřek

Nový veletrh  CEBIT je připraven. V polovině června začne v Hannoveru evropský festival obchodu s radikálně změněnou koncepcí věnovaný inovacím a digitalizaci.  CEBIT jedinečnou formou spojuje obchod v digitálním hospodářství 
s festivalovými prvky a posouvá do středu pozornosti téma digitální transformace hospodářství a společnosti.  

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý