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.
|
1 2 3 4 5 |
function image_width_plus( img_width, id, max ) { } function image_width_minus( img_width, id, min ) { } |
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ě:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/** @autor: Jiří Zachar @param img_width puvodni velikost obrazku @id id obrazku @max maximalni velikost @return true; **/ function image_width_plus( img_width, id, max ) { timer = null; //objekt z daneho identifikatoru idImg = document.getElementById(id); //podminka pro porovnani velikosti if(img_width <= max ) { //v pripade pravdy vytvorime novou velikost img_width += 3; //a nastavime nvoou velikost idImg.style.width = ( img_width ) + "px"; //rekurzivne volame funkci pro zvetsovani obrazku timer = setTimeout("image_width_plus(" + img_width + ",'" + id + "', " + max + ");", 10); } else { //clearTimeout('timer'); return true; } } |
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á:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/** @autor: Jiří Zachar @param img_width puvodni velikost obrazku @id id obrazku @min minimalni velikost @return true; **/ function image_width_minus( img_width, id, min ) { timer = null; //objekt z daneho identifikatoru idImg = document.getElementById(id); //podminka pro porovnani velikosti if(img_width >= min ) { //v pripade pravdy vytvorime novou velikost img_width -= 3; //a nastavime nvoou velikost idImg.style.width = ( img_width ) + "px"; //rekurzivne volame funkci pro zmensovani obrazku timer = setTimeout("image_width_minus(" + img_width + ",'" + id + "', " + min + ");", 10); } else { //clearTimeout('timer'); return true; } } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/** @autor: Jiří Zachar @id id obrazku @max maximalni velikost **/ function resize_plus( id, max ){ //objekt z daneho identifikatoru idImg = document.getElementById(id); //volame funkci pro zvetseni obrazku //jako prvni parametr uvedeme soucasnou velikost obrazku image_width_plus( idImg.width, id, max ); } /** @autor: Jiří Zachar @id id obrazku @min minimalni velikost **/ function resize_minus( id, min ){ //objekt z daneho identifikatoru idImg = document.getElementById(id); //volame funkci pro zmenseni obrazku //jako prvni parametr uvedeme soucasnou velikost obrazku image_width_minus( idImg.width, id, min ); } |
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:
|
1 |
<img src="resize.png" border="0" width="150px" id="imageResize" style="border: 0px" align="center"> |
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:
|
1 2 |
<input type="submit" onclick="resize_plus('imageResize', 300);" value="resize plus" /> <input type="submit" onclick="resize_minus('imageResize', 150);" value="resize minus" /> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** @autor: Jiri Zachar */ function paint_images(){ //vytvorime pole pro nove velikosti obrazku var values = new Array(123, 145, 100, 145, 88, 40, 110, 120 ); //v cyklu zavolame funkci pro zvetseni obrazku for( i = 1; i < 9; i++ ){ resize_plus("a" + i, values[i-1]); } } /** @autor: Jiri Zachar */ function set_default(){ //v cyklu volame metodu pro zmenseni obrazku na hodnotu width 30px for( i = 1; i < 9; i++ ){ resize_minus("a" + i, 30); } } |
Nakonec ještě mírně upravený zdrojový kód obou ukázkových příkladů:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<script language="JavaScript"> /** @autor: Jiřà Zachar @param img_width puvodni velikost obrazku @id id obrazku @max maximalni velikost @return true; **/ function image_width_plus( img_width, id, max ) { timer = null; //objekt z daneho identifikatoru idImg = document.getElementById(id); //podminka pro porovnani velikosti if(img_width <= max ) { //v pripade pravdy vytvorime novou velikost img_width += 3; //a nastavime nvoou velikost idImg.style.width = ( img_width ) + "px"; //rekurzivne volame funkci pro zvetsovani obrazku timer = setTimeout("image_width_plus(" + img_width + ",'" + id + "', " + max + ");", 10); } else { //clearTimeout('timer'); return true; } } /** @autor: Jiřà Zachar @param img_width puvodni velikost obrazku @id id obrazku @min minimalni velikost @return true; **/ function image_width_minus( img_width, id, min ) { timer = null; //objekt z daneho identifikatoru idImg = document.getElementById(id); //podminka pro porovnani velikosti if(img_width >= min ) { //v pripade pravdy vytvorime novou velikost img_width -= 3; //a nastavime nvoou velikost idImg.style.width = ( img_width ) + "px"; //rekurzivne volame funkci pro zmensovani obrazku timer = setTimeout("image_width_minus(" + img_width + ",'" + id + "', " + min + ");", 10); } else { //clearTimeout('timer'); return true; } } /** @autor: Jiřà Zachar @id id obrazku @max maximalni velikost **/ function resize_plus( id, max ){ //objekt z daneho identifikatoru idImg = document.getElementById(id); //volame funkci pro zvetseni obrazku //jako prvni parametr uvedeme soucasnou velikost obrazku image_width_plus( idImg.width, id, max ); } /** @autor: Jiřà Zachar @id id obrazku @min minimalni velikost **/ function resize_minus( id, min ){ //objekt z daneho identifikatoru idImg = document.getElementById(id); //volame funkci pro zmenseni obrazku //jako prvni parametr uvedeme soucasnou velikost obrazku image_width_minus( idImg.width, id, min ); } /** @autor: Jiri Zachar */ function paint_images(){ //vytvorime pole pro nove velikosti obrazku var values = new Array(123, 145, 100, 145, 88, 40, 110, 120 ); //v cyklu zavolame funkci pro zvetseni obrazku for( i = 1; i < 9; i++ ){ resize_plus("a" + i, values[i-1]); } } /** @autor: Jiri Zachar */ function set_default(){ //v cyklu volame metodu pro zmenseni obrazku na hodnotu width 30px for( i = 1; i < 9; i++ ){ resize_minus("a" + i, 30); } } </script> <center> <input onclick="resize_plus('imageResize', 300);" value="resize plus"/> <input onclick="resize_minus('imageResize', 150);" value="resize minus" /> <br /> <img src="resize.png" border="0" width="150px" id="imageResize" style="border: 0px" align="center"> </center> <center> <input type="submit" value="go" onclick="paint_images();" /> <input type="submit" value="set default" onclick="set_default();" /> <table style="width:300px"> <tr><th align="center" width="80px">Datum</th><th align="center">Hodnota</th></tr> <tr><td>1.1.2008</td><td align="left">1.23<br /><img src="graf2c.gif" width="30px" height="5px" id="a1" style="border: 0px; padding:0;margin:0px"></td></tr> <tr><td>2.1.2008</td><td align="left">1.45<br /><img src="graf2c.gif" width="30px" height="5px" id="a2" style="border: 0px; padding:0;margin:0px" ></td></tr> <tr><td>3.1.2008</td><td align="left">1.00<br /><img src="graf2c.gif" width="30px" height="5px" id="a3" style="border: 0px; padding:0;margin:0px"></td></tr> <tr><td>4.1.2008</td><td align="left">1.45<br /><img src="graf2c.gif" width="30px" height="5px" id="a4" style="border: 0px; padding:0;margin:0px"></td></tr> <tr><td>5.1.2008</td><td align="left">0.88<br /><img src="graf2c.gif" width="30px" height="5px" id="a5" style="border: 0px; padding:0;margin:0px" ></td></tr> <tr><td>6.1.2008</td><td align="left">0.4<br /><img src="graf2c.gif" width="30px" height="5px" id="a6" style="border: 0px; padding:0;margin:0px"></td></tr> <tr><td>7.1.2008</td><td align="left">1.1<br /><img src="graf2c.gif" width="30px" height="5px" id="a7" style="border: 0px; padding:0;margin:0px"></td></tr> <tr><td>8.1.2008</td><td align="left">1.2<br /><img src="graf2c.gif" width="30px" height="5px" id="a8" style="border: 0px; padding:0;margin:0px"></td></tr> </table> </center> |
Ahoj, super článek. Díky za skvělej skriptík.
Moc dekuji za clanek, doplnujici popis a vysvetleni. Perfektni.