NovΘ p°echody - p°ehled IV
╚tvrt² p°ehled nov²ch p°echod∙ z dφlny Microsoftu je v∞novßn dalÜφm t°em zajφmav²m p°echod∙m. V prvnφm z nich projdeme zrn∞nφm p°i pou₧itφ RandomDissolve, druh² nßm umo₧≥uje pr∙chod skrze posun r∙zn²ch °ez∙ p∙vodnφho obsahu (Slide) a t°etφ Spiral zase prochßzφ Üroubovit²m pohybem k novΘmu obsahu prvku.
VÜechny tyto p°echody, jak ji₧ bylo n∞kolikrßt °eΦeno, 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∞ ani nebudou, nebo¥ se jednß v²luΦn∞ o syntaxi Microsoftu.
P°echod RandomDissolve
Nov² obsah prvku zobrazφ zrn∞nφm. Nahrazuje p°echod 12 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², imlicitnφ) 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ß. |
Pro demonstraci RandomDissolve jsem si pro vßs vybral p°φklad p°echodu dvou text∙ s vyu₧itφm vlastnosti InnerHTML. Prßv∞ pro takovou aplikaci je tento p°echod nejp°φhodn∞jÜφ. P°echod RandomDissolve je nachystßn k vyzkouÜenφ takΘ p°φmo na testovacφ strßnce MSDN Microsoft.
Zdrojov² k≤d ovlßdacφho skriptu:
<!--
var stav = 0;
function rdis() {
txt_rdis.filters[0].Apply();
if (stav==0) {
stav = 1;
txt_rdis.innerHTML="<br>Jedin∞ p°echod RandomDissolve!";}
else {
stav = 0;
txt_rdis.innerHTML="<br>Jak lΘpe dosßhnout takto efektnφ zm∞ny textu???";}
txt_rdis.filters[0].Play();
-->
</script>
V ovlßdacφm skriptu nejprve nadefinujeme funkci rdis(), kterß aplikuje dan² p°echod pomocφ metody apply(). Definovanß prom∞nnß stav pak zajiÜ¥uje, za pomoci podmφnek, pravidelnΘ st°φdßnφ prvnφho a druhΘho textu. Nßsledn∞ jsou ve funkci rdis() pomocφ vlastnosti InnerHTML, kterß m∞nφ obsah prvku vΦetn∞ element∙ jazyka HTML, nadefinovßny koneΦnΘ obsahy prvku txt_rdis. Dßle u₧ funkce jenom zavolß metodu play() danΘho p°echodu.
Zdrojov² k≤d prvk∙:
<br>Jak lΘpe dosßhnout takto efektnφ zm∞ny textu???
</div>
<button onclick="rdis()">Spustit p°echod RandomDissolve</button>
Samotn² p°echod RandomDissolve je pak vΦetn∞ svΘho parametru duration=3 (doba trvßnφ 3s) definovßn v atributu style prvku txt_rdis vlastnostφ filter. V atributu style prvku txt_rdis je pak jeÜt∞ pomocφ vlastnostφ jazyka CSS nastaveno formßtovßnφ pφsma textu. P°echod se spouÜtφ tlaΦφtkem "Spustit p°echod RandomDissolve", kterΘ po kliknutφ volß ji₧ nadefinovanou funkci rdis(). U prvku txt_rdis musφ b²t v atributu style nastaveny povinnΘ vlastnosti pro prvky div a span, a to width nebo height!
P°echod Slide
Zobrazφ nov² obsah prvku r∙zn²m posouvßnφm °ez∙ jeho p∙vodnφho obsahu. Nenahrazuje ₧ßdn² p∙vodnφ p°echod.
Syntaxe:
Parametry:
| Parametr | Popis |
|---|---|
| Bands | Nastavuje poΦet °ez∙, na kterΘ se po spuÜt∞nφ p°echodu p∙vodnφ obsah prvku rozd∞lφ. M∙₧e nab²vat hodnot 1 (implicitnφ) a₧ 100. |
| 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. |
| SlideStyle | UrΦuje metodu pou₧itou pro odkrytφ novΘho obsahu prvku. M∙₧e nab²vat hodnot hide - posouvß °ezy z povrchu prvku (implicitnφ), push - posouvß °ezy nad prvek, swap - posouvß °ezy z prvku i nad prvek najednou. |
| 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ß. |
Pro ukßzku chovßnφ p°echodu Slide jsem v tomto p°φkladu pou₧il p°echod dvou obrßzku pomocφ jednoduchΘ zm∞ny atributu src. P°echod Slide je k vyzkouÜenφ takΘ p°φmo na testovacφ strßnce Microsoftu.
Zdrojov² k≤d ovlßdacφho skriptu:
<!--
var stav = 0;
function slide() {
kontejner_slide.filters[0].Apply();
if (stav==0) {
stav = 1;
obr2_slide.style.visibility = "visible";
obr1_slide.style.visibility = "hidden";}
else {
stav = 0;
obr2_slide.style.visibility = "hidden";
obr1_slide.style.visibility = "visible";}
kontejner_slide.filters[0].Play();}
-->
</script>
V ovlßdacφm skriptu nejprve nadefinujeme prom∞nnou stav a potΘ funkci slide(), kterß nßsledn∞ aplikuje dan² p°echod pomocφ metody apply(). Prom∞nnß stav zajiÜ¥uje za pomoci podmφnek pravidelnΘ st°φdßnφ obrßzk∙. Dßle jsou ve funkci slide() definovßny atributem style koneΦnΘ hodnoty vlastnostφ visibility prvk∙ obr1_slide a obr2_slide, kterΘ jsou nastaveny v zßvislosti na hodnot∞ prom∞nnΘ stav. Nakonec funkce u₧ jen volß spouÜt∞cφ metodu play() danΘho p°echodu.
Zdrojov² k≤d prvk∙ a tlaΦφtka:
<span id="obr1_slide" style="background-image: url(prechod1.gif);">
<span id="obr2_slide" style="visibility:hidden;"><img src="prechod3.gif" width="250px" height="210px" alt="Logo" /></span>
</span>
</span>
<button onclick="slide()">Spustit p°echod Slide</button>
P°echodnΘ prvky obr1_slide a obr2_slide jsou vno°enΘ do prvku kontejner_slide. V n∞m je pomocφ atributu style a vlastnosti filter definovßn p°echod Slide i se vÜemi sv²mi parametry bands=1 (jeden °ez), duration=6 (doba trvßnφ 6s), slidestyle=swap (posouvß °ez z prvku i nad prvek najednou). Nezapome≥te, ₧e u druhΘho p°echodnΘho prvku musφ b²t na zaΦßtku nastavena vlastnost visibility na hodnotu hidden, jinak by byl tento prvek 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∙ s obrßzky nad sebe. TlaΦφtko "Spustit p°echod Slide" potom po kliknutφ jenom volß p°edem definovanou funkci slide(). Nesmφme zapomenout takΘ na nastavenφ atribut∙ width nebo height u prvk∙ div a span.
P°echod Spiral
Zobrazφ nov² obsah prvku Üroubovit²m pohybem. Pat°φ k nov²m p°echod∙m, kterΘ nebyly d°φve nikde 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ß. |
K prezentaci dovednostφ p°echodu Spiral jsem se rozhodl vyu₧φt p°φkladu obrßzku a zm∞ny jeho vlastnosti visibility, tak₧e doufßm, ₧e vÜe snadno pochopφte. P°echod Spiral si ale m∙₧ete vyzkouÜet takΘ p°φmo na testovacφ strßnce MSDN Microsoft.
Zdrojov² k≤d ovlßdacφho skriptu:
<!--
var stav = 0;
function spiral() {
obr_spiral.filters[0].Apply();
if (stav==0) {
stav = 1;
obr_spiral.style.visibility = "visible";}
else {
stav = 0;
obr_spiral.style.visibility = "hidden";}
obr_spiral.filters[0].Play();}
-->
</script>
V ovlßdacφm skriptu nejprve definujeme prom∞nnou stav a funkci spiral(), kterß po zavolßnφ aplikuje dan² p°echod pomocφ metody apply(). Definovanß prom∞nnß stav zajiÜ¥uje za pomoci podmφnek pravidelnΘ st°φdßnφ viditelnΘho a neviditelnΘho obrßzku. Dßle jsou ve funkci spiral() definovßny atributem style koneΦnΘ hodnoty vlastnostφ visibility prvku obr_spiral, kterΘ jsou nastaveny v zßvislosti na hodnot∞ prom∞nnΘ stav. Nakonec u₧ funkce volß jen metodu play() danΘho p°echodu.
Zdrojov² k≤d prvk∙ a tlaΦφtka:
<button onclick="spiral()">Spustit p°echod Spiral</button>
P°echod Spiral je i sv²mi t°emi parametry duration=1 (doba trvßnφ 1s), gridsizex=100 (100 sloupc∙ v m°φ₧ce), gridsizey=100 (100 °ßdk∙ v m°φ₧ce) nastaven p°φmo u p°echodnΘho prvku obr_spiral pomocφ atributu style a vlastnosti filter. TlaΦφtko "Spustit p°echod Spiral" pak u₧ jen volß funkci spiral(), definovanou v ovlßdacφm skriptu.
