© 2013 All rights reserved.
2

JavaScript: plynulá změna velikosti obrázku

Aneb jak docílit plynulé změny velikosti obrázku po vyvolání události v JavaScriptu.

Díky javascriptu a jeho přístupu ke stylům elementu ve zdrojovém kódu stránky můžeme docílit zajímavých nebo i užitečných animací. Pomocí javascriptu můžete na svém webu jednoduše vytvářet dynamické prvky.

V tomto článku si vytvoříme jednoduchý script (javascript), pomocí nějž budeme moci plynule měnit velikost obrázku. Samozřejmě by nebyl problém script upravit tak, aby fungoval i na jiné elementy než na obrázky. Výsledný efekt bude vypadat podobně jako na tomto příkladu použítí.

Kliknutím na tlačítko plus obrázek zvětšíte a kliknutím na tlačítko mínus obrázek zmenšíte do původní velikosti.




Pro změnu si vytvoříme kvůli jednoduchosti a přehlednosti dvě funkce, jednu pro zvětšování a druhou pro zmenšování, i když by nebyl problém vytvořit pouze jednu funkci a obě operace do ní implementovat.

Obě funkce budou podobné, lišit se budou pouze ve změně znamínka při přičítání nebo odečítání velikosti.

Pro zmenšování a zvětšování využijeme toho, že může javascript přistupovat ke stylům elemntu na stránce a tyto styly měnit.

Vstupní parametry budou obě funkce obsahovat tři. První z nich bude původní velikost obrázku, kterou si samozřejmě můžeme pomocí javascriptu zjistit, ale to si ukážeme později.

Druhý parametr bude identifikátor obrázku, pomocí nějž obrázek v kódu rozlišíme a třetí bude maximální nebo minimální velikost, na kterou chceme současnou velikost změnit.

Pokud známe identifikátor, můžeme k elementu přistupovat pomocí funkce document.getElementById.

Takto vytvořenému objektu můžeme jednoduše nastavit požadovanou velikost.

Abychom dosáhli plynulého přechodu, budeme velikost měnit jenom o několik pixelů a funkci rekurzivně volat v určitém časovém intervalu využitím funkce setTimeout.

Při každém volání funkce provedeme kontrolu na velikost a v případě že je současná velikost rovna požadované velikosti volání ukončíme.

Funkce pro zvětšení obrázku bude vypadat následovně:

Nejprve vytvoříme objekt z ID elementu. Poté zkontrolujeme, zda není velikost obrázku větší než maximální a v případě že ne, nastavíme velikost o 3 px větší. Rekurzivně voláme stejnou funkci v intervalu 10 ms pomocí setTimeout.

Obdobně bude vypadat i funkce pro změnšení obrázku, jenom s tím rozdílem, že velikost budeme postupně zmenšovat a kontrolovat, zda není velikost menší než požadovaná:

Jak jsem již psal, pomocí javascriptu si můžeme jednoduše zjistit současné rozměry obrázku a tím docílíme toho, že nebude potřeba zadávat všechny tři parametry, ale pouze dva, identifikátor a maximální/minimální velikost.

Můžeme si tedy udělat dvě pomocné funkce, které nám velikost zjistí a budou volat funkce pro změnu velikosti:

Pro volání budeme používat nově vytvořené funkce, kterým přidáme pouze dva parametry.
Při volání musí existovat obrázek, která ma libovolný identifikátor, tedy například:

Volat funkci můžeme například po vyvolání události na stránkce, jako je kliknutí myši, tedy například jako je tomu v první ukázce:

Po kliknutí na první button se volá funkce resize_plus a změní současnou velikost obrázku 150 px na velikost 300 px.

Druhé tlačítko změní současou velikost obrázku zpět na 150 px.

Rychlost změny velikosti

Samozřejmě můžeme snadno ovlivnit rychlost změny velikosti. Tuto rychlost ovlivníme nastavením dvou hodnot ve funkcích.

První z nich je velikost v pixelech o kterou obrázku měníme rozměry. Tato hodnota určuje o kolik pixelů se bude obrázek zvětšovat nebo zmenšovat v daném průchodu funkce.

Druhá hodnota je interval ve funkci setTimeout, pomocí niž můžeme nastavit za jakou dobu se provede další cyklus funkce.

Ovlivnění více elementů

Využití může být různé, ale může nastat situace, kdy chceme ovlivnit více elementů na stránce, jako například v této ukázce, kdy se po kliknutí na tlačítko „go“ vykreslí pro jednotlivé buňky v tabulce graf (linka), odpovídající hodnotě a po kliknutí na tlačítko „set default“ se vše vrátí do původního stavu:



Datum Hodnota
1.1.2008 1.23
2.1.2008 1.45
3.1.2008 1.00
4.1.2008 1.45
5.1.2008 0.88
6.1.2008 0.4
7.1.2008 1.1
8.1.2008 1.2

V takovém případě si musíme vytvořit pro každý obrázek jiný elementu a po vyvolání události provedeme změnu velikosti více obrázků například v cyklu.

Hodnoty pro nové rozměry si uložíme do pole. Výsledné funkce mohou vypadat takto:

Nakonec ještě mírně upravený zdrojový kód obou ukázkových příkladů:

Comments are closed for this page

Ahoj, super článek. Díky za skvělej skriptík.

Moc dekuji za clanek, doplnujici popis a vysvetleni. Perfektni.

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).
To cooperate, here is my phone:
+420 608 836