NovΘ p°echody - p°ehled V
V tomto Φlßnku se podφvßme na poslednφ Φty°i novΘ p°echody z dφlny Microsoftu. Pomocφ p°echodu Stretch hrav∞ dosßhneme efektu rotujφcφ krychle, mßme tu takΘ p°echod Strips, kter² se podobß p°echodu Inset, nebo zajφmav² p°echod Wheel, p°ipomφnajφcφ roztoΦenΘ kolo povozu. A na zßv∞r p°echod Zigzag, jak ji₧ nßzev napovφdß, odkr²vajφcφ nov² obsah sem a tam.
VÜechny tyto p°echody, jak jsem ji₧ zd∙raz≥oval d°φve, jsou v souΦasnΘ dob∞ bez problΘm∙ pou₧itelnΘ v prohlφ₧eΦφch MSIE 5.5 a vyÜÜφch. Nejsou ale souΦßstφ ₧ßdn²ch standard∙ a pravd∞podobn∞ se tomu tak ani nestane, nebo¥ se jednß v²luΦn∞ o syntaxi Microsoftu.
P°echod Stretch
Nov² obsah prvku zobrazφ rozta₧n²m pohybem p°ekr²vajφcφm p∙vodnφ obsah. Jeden styl p°ipomφnß krychli rotujφcφ podle st°edovΘ osy. TakΘ pat°φ mezi novΘ p°echody p°edtφm nikde nezahrnutΘ.
Syntaxe:
Parametry:
| Parametr | Popis |
|---|---|
| Duration | UrΦuje dΘlku trvßnφ celΘho p°echodu. Udßvß se v sekundßch.milisekundßch (0.0000). |
| Enabled | UrΦuje mo₧nost pou₧itφ p°echodu. M∙₧e nab²vat hodnot true (zapnut², implicitnφ) nebo false (vypnut²). |
| Percent | Nastavφ bod, ve kter²m se p°echod zastavφ a dosßhne tφm efektu statickΘho filtru. M∙₧e nab²vat hodnot 0 (implicitnφ) a₧ 100. |
| Status | Uchovßvß aktußlnφ stav p°echodu. M∙₧e nab²vat hodnot 0 - p°echod stojφ, 1 - p°echod je aplikovßn, 2 - p°echod probφhß. |
| StretchStyle | UrΦuje metodu pou₧itou pro p°echod. M∙₧e nab²vat hodnot hide (implicitnφ), push a spin. |
K p°echodu Stretch jsem si zde p°ipravil p°φklad s barevnou plochou p°echßzejφcφ v obrßzek, a to za pou₧itφ zm∞ny vlastnosti visibility p°echodn²ch prvk∙. P°echod Stretch si m∙₧ete stejn∞ jako ostatnφ p°echody vyzkouÜet p°φmo na testovacφ strßnce MSDN Microsoft.
Zdrojov² k≤d ovlßdacφho skriptu:
<!--
var stav = 0;
function str() {
kontejner_str.filters[0].Apply();
if (stav==0) {
stav = 1;
obr2_str.style.visibility="visible";
obr1_str.style.visibility="hidden";}
else {
stav = 0;
obr2_str.style.visibility="hidden";
obr1_str.style.visibility="visible";}
kontejner_str.filters[0].Play();}
-->
</script>
V ovlßdacφm skriptu nejprve nadefinujeme prom∞nnou stav a potΘ funkci str(), kterß aplikuje dan² p°echod pomocφ metody apply(). Prom∞nnß stav zajiÜ¥uje za pomoci podmφnek pravidelnΘ st°φdßnφ barevnΘ plochy a obrßzku. Dßle jsou ve funkci str() definovßny atributem style koneΦnΘ hodnoty vlastnostφ visibility prvk∙ obr1_str a obr2_str, kterΘ jsou nastaveny v zßvislosti na hodnot∞ prom∞nnΘ stav. Nakonec funkce zavolß spouÜt∞cφ metodu play() danΘho p°echodu.
Zdrojov² k≤d prvk∙ a tlaΦφtka:
<span id="obr1_str" style="background-color: gold;">
<span id="obr2_str" style="visibility:hidden;"><img src="prechod3.gif" width="250px" height="210px" alt="Logo" /></span>
</span>
</span>
<button onclick="str()">Spustit p°echod Stretch</button>
Dßle jsou tu p°echodnΘ prvky obr1_str a obr2_str vno°enΘ do prvku kontejner_str, ve kterΘm je pomocφ atributu style a vlastnosti filter definovßn p°echod Stretch i se sv²m parametrem duration=10 (doba trvßnφ 10s). U druhΘho p°echodnΘho prvku musφme na zaΦßtku nastavit vlastnost visibility na hodnotu hidden, jinak by byl zobrazen jeÜt∞ p°ed spuÜt∞nφm p°echodu. StejnΘho efektu se dß jednoduÜeji dosßhnout i pou₧itφm absolutnφho polohovßnφ obou prvk∙ nad sebe. TlaΦφtko "Spustit p°echod Stretch" po kliknutφ jen volß definovanou funkci str(). U prvk∙ div a span nesmφme zapomenout na nastavenφ atribut∙ width nebo height.
P°echod Strips
Zobrazφ nov² obsah prvku pohybem odkr²vajφcφho zubatΘho pruhu po diagonßle, p°ipomφnß zubatou pilku pohybujφcφ se po diagonßle. Podobn² p°echodu Inset. Nahrazuje p°echody 17 a₧ 20 starÜφho p°echodu RevealTrans.
Syntaxe:
Parametry:
| Parametr | Popis |
|---|---|
| Duration | UrΦuje dΘlku trvßnφ celΘho p°echodu. Udßvß se v sekundßch.milisekundßch( 0.0000). |
| Enabled | UrΦuje mo₧nost pou₧itφ p°echodu. M∙₧e nab²vat hodnot true (zapnut², implicitnφ) nebo false (vypnut²). |
| Motion | Nastavuje roh prvku ze kterΘho se nov² obsah prvku zaΦne odkr²vat. M∙₧e nab²vat hodnot leftdown - z hornφho pravΘho rohu (implicitnφ), leftup - z dolnφho pravΘho rohu, rightdown - z levΘho hornφho rohu, rightup - z levΘho dolnφho rohu. |
| Percent | Nastavφ bod, ve kter²m se p°echod zastavφ a dosßhne tφm efektu statickΘho filtru. M∙₧e nab²vat hodnot 0 (implicitnφ) a₧ 100. |
| Status | Uchovßvß aktußlnφ stav p°echodu. M∙₧e nab²vat hodnot 0 - p°echod stojφ, 1 - p°echod je aplikovßn, 2 - p°echod probφhß. |
Na demonstraci mo₧nostφ p°echodu Strips jsem pou₧il p°φklad p°echodu dvou obrßzk∙ pomocφ zm∞ny atributu src p°echodnΘho prvku. P°echod Strips si m∙₧ete takΘ vyzkouÜet p°φmo na testovacφ strßnce MSDN Microsoft.
Zdrojov² k≤d ovlßdacφho skriptu:
<!--
var stav = 0;
function strips() {
obr_strips.filters[0].Apply();
if (stav==0) {
stav = 1;
obr_strips.src="prechod3.gif";}
else {
stav = 0;
obr_strips.src="prechod1.gif";}
obr_strips.filters[0].Play();}
-->
</script>
V ovlßdacφm skriptu nejprve definujeme funkci strips(), kterß aplikuje dan² p°echod pomocφ metody apply(). Definovanß prom∞nnß stav zajiÜ¥uje za pomoci podmφnek pravidelnΘ st°φdßnφ obrßzk∙. Dßle je ve funkci strips() definovßna koneΦnß hodnota atributu src obrßzku obr_strips, kterß je urΦena prßv∞ v zßvislosti na hodnot∞ prom∞nnΘ stav. Nakonec ji₧ funkce volß metodu play() danΘho p°echodu.
Zdrojov² k≤d prvk∙:
<button onclick="strips()">Spustit p°echod Strips</button>
P°echod Strips spolu s parametry duration=0.4 (doba trvßnφ 400ms) a motion=rightup (z levΘho dolnφho rohu) je definovßn v atributu style p°echodnΘho obrßzku obr_strips vlastnostφ filter. Dßle je zde ji₧ pouze tlaΦφtko "Spustit p°echod Strips", kterΘ po kliknutφ volß funkci strips() definovanou v ovlßdacφm skriptu.
P°echod Wheel
Zobrazφ nov² obsah prvku postupn²m odkr²vßnφm paprsku rotujφcφho kolem st°edu. P°ipomφnß rotujφcφ kolo povozu. TakΘ tento p°echod pat°φ mezi novΘ p°edtφm nikam nezahrnutΘ filtry.
Syntaxe:
Parametry:
| Parametr | Popis |
|---|---|
| Duration | UrΦuje dΘlku trvßnφ celΘho p°echodu. Udßvß se v sekundßch.milisekundßch (0.0000). |
| Enabled | UrΦuje mo₧nost pou₧itφ p°echodu. M∙₧e nab²vat hodnot true (zapnut², implicitnφ) nebo false (vypnut²). |
| Percent | Nastavφ bod, ve kter²m se p°echod zastavφ a dosßhne tφm efektu statickΘho filtru. M∙₧e nab²vat hodnot 0 (implicitnφ) a₧ 100. |
| Spokes | UrΦuje poΦet klφn∙, do kter²ch se obsah prvku rozd∞lφ. M∙₧e nab²vat hodnot 2 a₧ 20, implicitn∞ 4. |
| Status | Uchovßvß aktußlnφ stav p°echodu. M∙₧e nab²vat hodnot 0 - p°echod stojφ, 1 - p°echod je aplikovßn, 2 - p°echod probφhß. |
U p°echodu Wheel bych vßm rßd na p°φklad∞ p°edvedl takΘ mo₧nost pravidelnΘho opakovßnφ, kterΘ je zde zajiÜt∞nou pomocφ funkce SetTimeout. V pravideln²ch intervalech zde budou pomocφ vlastnosti InnerHTML p°echßzet obrßzek a text. P°echod Wheel zase trochu jinak si m∙₧ete vyzkouÜet takΘ p°φmo na testovacφ strßnce MSDN Microsoft.
Zdrojov² k≤d ovlßdacφho skriptu:
<!--
var stav = 0;
function wheel() {
obr_wheel.filters[0].Apply();
if (stav==0) {
stav = 1;
obr_wheel.innerHTML="<img src='prechod1.gif' width='250px' height='210px' alt='Logo MSIE 6.0' />";}
else {
stav = 0;
obr_wheel.innerHTML="<br><br>Filtr Wheel";}
obr_wheel.filters[0].Play();
cas = setTimeout("wheel()",5000);}
-->
</script>
V ovlßdacφm skriptu je nejprve definovßna funkce wheel(), kterß aplikuje dan² p°echod pomocφ metody apply(). Definovanß prom∞nnß stav pak zajiÜ¥uje za pomoci podmφnky pravidelnΘ st°φdßnφ obrßzku a textu. Pomocφ vlastnosti InnerHTML, kterß m∞nφ obsah prvku vΦetn∞ element∙ jazyka HTML, ve funkci wheel() nadefinujeme koneΦnΘ obsahy prvku obr_wheel. Potom ji₧ funkce wheel() zavolß metodu play() danΘho p°echodu. Aby se cel² p°echod pravideln∞ opakoval, je do skriptu p°idßna navφc prom∞nnß cas, kterß pomocφ p°eddefinovanΘ funkce SetTimeout() nastavuje volßnφ funkce check() na 5000 milisekund. A vzhledem k tomu, ₧e je tato funkce volßna na konci ka₧dΘho prob∞hnutφ funkce wheel(), opakuje se spouÜt∞nφ p°echodu pravideln∞ ka₧d²ch 5000 milisekund.
Zdrojov² k≤d prvk∙:
<img onload="wheel()" src="prechod1.gif" width="250px" height="210px" alt="Logo MSIE 6.0" />
</div>
Samotn² p°echod Wheel je potom spolu se sv²mi dv∞ma parametry duration=5 (doba trvßnφ 5s) a spokes=7 (7 klφn∙) definovßn v atributu style prvku obr_wheel vlastnostφ filter. SpuÜt∞nφ ovlßdacφ funkce wheel() zajiÜ¥uje atribut onload vno°enΘho prvku, kter² funkci wheel() zavolß po naΦtenφ. V atributu style prvku obr_wheel jsou potom jeÜt∞ pomocφ vlastnostφ jazyka CSS nastaveny parametry pφsma zobrazovanΘho textu. U prvku obr_wheel musφ b²t v atributu style nastaveny povinnΘ atributy (vlastnosti) pro prvky div a span, a to width nebo height.
P°echod Zigzag
Nov² obsah prvku zobrazφ pohybem tam a zp∞t postupn∞ shoda dol∙. Poslednφ z nov²ch p°echod∙, kterΘ d°φve nebyly nikam zahrnuty.
Syntaxe:
Parametry:
| Parametr | Popis |
|---|---|
| Duration | UrΦuje dΘlku trvßnφ celΘho p°echodu. Udßvß se v sekundßch.milisekundßch (0.0000). |
| Enabled | UrΦuje mo₧nost pou₧itφ p°echodu. M∙₧e nab²vat hodnot true (zapnut², implicitnφ) nebo false(vypnut²). |
| GridSizeX | Nastavuje poΦet sloupc∙ m°φ₧ky pou₧itΘ pro p°echod. M∙₧e nab²vat hodnot 1 a₧ 100, implicitn∞ 16. |
| GridSizeY | Nastavuje poΦet °ßdk∙ m°φ₧ky pou₧itΘ pro p°echod. M∙₧e nab²vat hodnot 1 a₧ 100, implicitn∞ 16. |
| Percent | Nastavφ bod, ve kter²m se p°echod zastavφ a dosßhne tφm efektu statickΘho filtru. M∙₧e nab²vat hodnot 0 (implicitnφ) a₧ 100. |
| Status | Uchovßvß aktußlnφ stav p°echodu. M∙₧e nab²vat hodnot 0 - p°echod stojφ, 1 - p°echod je aplikovßn, 2 - p°echod probφhß. |
Na p°φklad∞ p°echodu Zigzag m∙₧ete vid∞t dva p°echodnΘ textovΘ prvky, p°echßzejφcφ dφky vlastnosti InnerHTML. P°echod Zigzag si m∙₧ete takΘ vyzkouÜet p°φmo na testovacφ strßnce MSDN Microsoft.
Zdrojov² k≤d ovlßdacφho skriptu:
<!--
var stav = 0;
function zig() {
txt_zig.filters[0].Apply();
if (stav==0) {
stav = 1;
txt_zig.innerHTML="<br>Na p°echod Zigzag!";}
else {
stav = 0;
txt_zig.innerHTML="<br>Vφte na jak² p°echod se prßv∞ dφvßte?";}
txt_zig.filters[0].Play();
-->
</script>
V ovlßdacφm skriptu nap°ed nadefinujeme funkci zig(), kterß aplikuje dan² p°echod pomocφ metody apply(). Definovanß prom∞nnß stav pak zajiÜ¥uje za pomoci podmφnky pravidelnΘ st°φdßnφ prvnφho a druhΘho textu. Dßle jsou ve funkci zig() pomocφ vlastnosti InnerHTML, kterß m∞nφ obsah prvku vΦetn∞ element∙ jazyka HTML, nadefinovßny koneΦnΘ obsahy prvku txt_zig. Dßle u₧ funkce jen zavolß metodu play() danΘho p°echodu.
Zdrojov² k≤d prvk∙:
<br>Vφte na jak² p°echod se prßv∞ dφvßte?
</div>
<button onclick="zig()">Spustit p°echod Zigzag</button>
P°echod Zigzag jako takov² je potom vΦetn∞ sv²ch parametr∙ duration=2 (doba trvßnφ 2s), gridsizex=40 (40 sloupc∙ m°φ₧ky) a gridsizey=40 (40 °ßdk∙ m°φ₧ky) definovßn v atributu style prvku txt_zig vlastnostφ filter. V atributu style prvku txt_zig je pak jeÜt∞ pomocφ vlastnostφ jazyka CSS nastaveno formßtovßnφ pφsma textu. P°echod se spouÜtφ kliknutφm na tlaΦφtko "Spustit p°echod Zigzag", kterΘ volß p°edem definovanou funkci zig(). U prvku txt_zig musφ b²t v atributu style nastaveny povinnΘ vlastnosti pro prvky div a span, tedy width nebo height!
A tφmto p°echodem jsem ji₧ zakonΦil p°ehled vÜech sedmnßcti nov²ch p°echod∙ z dφlny Microsoftu.
