Několik ukázek z dynamického HTML

V Computerworldu 5/97 jsme se v Tématu týdne věnovanému dynamickému HTML mohli setkat i s několika praktickými ukázkam...


V Computerworldu 5/97 jsme se v Tématu týdne věnovanému dynamickému HTML mohli
setkat i s několika praktickými ukázkami jeho užití. Ponořme se do kódu a
podívejme se ještě na několik dalších příkladů.
Plynulá změna obrázků pomocí filtrů
Následující ukázka používá filtrů k vytvoření X-střihu dvou obrázků (tzv.
"prolínačka"). Prolínání obrázků je dosaženo postupnou změnou jejich
transparentnosti v opačných směrech. Obrázky jsou nad sebe umístěny pomocí
stylu s absolutním určením pozice.
<HTML>
<HEAD>
<TITLE>Ukázka alfa-filtru</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var id, op = 100, // počáteční průhlednost step = -10; // krok
function Start()
{ id = window.setInterval("Move()", 50);
}
function Stop()
{ window.clearInterval(id);
}
function Move()
{ op += step; if (op < 0) { op = 0; step = -step; };
if (op > 100) { op = 100; step = -step; };
document.all.img1.filters.Alpha.opacity = op;
document.all.img2.filters.Alpha.opacity = 100-op;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<IMG ID=img1 SRC=tiger1.gif onMouseOver="Start()" onMouseOut="Stop()"
STYLE="position: absolute; top: 10px; left: 10px; z-index: 2; filter:
Alpha(Opacity=100)">
<IMG ID=img2 SRC=tiger2.gif STYLE="position: absolute; top: 10px; left: 10px;
z-index: 1; filter: Alpha(Opacity=0)">
</BODY>
</HTML>
Druhou možností, kterou při přechodu z jednoho elementu v druhý nabízejí
filtry, jsou přechodové filtry. Přechodový filtr se jmenuje revealTrans a
pracuje se s ním poněkud odlišně než s ostatními filtry. Filtr má 2 parametry
typ přechodu (transition) a dobu přechodu (duration). U elementu, který chceme
změnit, nejprve nastavíme typ přechodu a dobu přechodu. Poté zavoláme metodu
Apply() filtru. Ta připraví vše potřebné pro provedení přechodu. Nyní pomocí
vlastnosti innerText (nebo src u obrázků) přiřadíme elementu nový obsah.
Přechod pak spustíme vyvoláním metody Play(). Ta spustí přechod a použije
přitom zadaný typ přechodu. Internet Explorer 4.0 podporuje 23 přechodů (typy
0-22). Přechod číslo 23 je náhodný a vybere jeden z předchozích typů.
Přechod můžeme kdykoliv okamžitě ukončit pomocí metody Stop(). Pokud chceme
nějakou činnost navázat na skončení přechodu, využijeme toho, že po skončení
přechodu je vyvolána událost onFilterChange.
Všechny uvedené skutečnosti si demonstrujeme na malé ukázce. Vytvoříme stránku,
jež bude obsahovat čítač, který bude postupně zobrazovat čísla od 20 do 0. Při
změně čísla se použije vždy nový náhodně vybraný způsob přechodu.
<HTML>
<HEAD>
<TITLE>Ukázka přechodových filtrů</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var i=20;
function Tick()
{
i--;
if (i<0) { // ukončení odpočítávání window.event.srcElement.onFilterChange =
""; return; } document.all.Counter.filters.revealTrans.transition =
Math.round(Math.random()*23); // náhodný výběr přechodu
document.all.Counter.filters.revealTrans.Apply();
document.all.Counter.innerText = i;
ocument.all.Counter.filters.revealTrans.Play();
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Tick()">
<DIV ALIGN=CENTER>
<DIV ID=Counter STYLE="height: 150px; width: 200px; text-align: center;
background-color: blue; color: yellow; font: bold 140px Arial, sans-serif;
filter: revealTrans(duration=1)" onFilterChange="Tick()">
20
</DIV>
</DIV>
</BODY>
</HTML>
Přechody vyvolává funkce Tick(). Tu spustíme po načtení stránky a tím zároveň
aktivujeme první přechod. Další přechody jsou již volány automaticky po
dokončení předešlého přechodu právě nastavením obsluhy události on FilterChange
na funkci Tick().
Světelné zdroje
Velice pěkné efekty lze dosáhnout použitím filtru Light. Ten umožňuje nad 1
element umístit až 10 světelných zdrojů. Zdroje světla různým způsobem
nasvěcují element a určují tak, která jeho část bude viditelná.
Internet Explorer 4.0 podporuje 3 druhy zdrojů světla: rovnoměrný (Ambient),
bodový (Point) a kuželový (Cone). Zdroje světla nelze definovat přímo jako
parametry filtru, musí se přidat až přímo ve skriptu voláním metody addAmbient,
addCone nebo addPoint. Nejjednoduší je přidání rovnoměrného zdroje světla:
addAmbient
(R, G, B, intenzita)
Parametry R, G a B určují intenzitu základních složek barvy světla. Mohou
nabývat hodnot od 0 do 255. Celková intenzita světelného zdroje je určena
pomocí posledního celočíselného parametru.
K přidání kuželového zdroje světla potřebujeme zadat více parametrů: addCone
(x1, y1, z1, x2, x2, R, G, B, intenzita, úhel)
Souřadnice (x1, y1, z1) udávají prostorové souřadnice zdroje světla, který
svítí do bodu (x2, y2, 0). úhel určuje vrcholový úhel vrženého kuželu světla.
Ostatní parametry mají stejný význam jako u rovnoměrného zdroje světla.
Přidání bodového zdroje světla je velmi jednoduché: addPoint (x, y, z, R, G, B,
intenzita)
Po přidání světel můžeme měnit jejich polohu pomocí metody moveLight a vytvořit
tak vskutku působivé efekty:
moveLight(číslo_světla, x, y, z, true)
Světla v jednom filtru jsou číslována od nuly podle pořadí, v jakém byla
přidána.
Praktické použití zdrojů světla si ukážeme na malé ukázce. Vytvoříme stránku s
nápisem. Nápis bude částečně viditelný (díky zdroji rovnoměrného světla) a bude
přes něj jezdit kužel světla, který vždy zviditelní osvětlenou část nápisu.
Výsledek je viditelný na obrázku.
<HTML>
<HEAD>
<TITLE>Dynamické HTML -světelné zdroje</TITLE>
<STYLE TYPE="text/css">
<!-BODY { color: white; background-color: black; text-align: center }
#napis { position: relative; width: 700px; height: 80px; font: bold 60px Arial;
filter: Light() }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var MinX=0, MaxX=700, X=0, Y=40, Step=10, id;
function Move()
{ // Přesun zdroje světla document.all.napis.filters.Light.moveLight (0, X, Y,
0, true); // Aktualizace X += Step; if (X >= MaxX) { Step = -Step; }; if (X <=
MinX) { Step = -Step; };
}
function Init()
{ document.all.napis.filters.Light.addCone( (MinX+MaxX)/2, Y, 100, X, Y, 255,
255, 255, 100, 20); // Kuželový zdroj světla
document.all.napis.filters.Light.addAmbient( 0, 0, 127, 100); // Rovnoměrný
zdroj světla id = setInterval("Move()", 100); // Aktivace pohybu
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Init()">
<DIV ID=napis>Computerworld</DIV>
</BODY>
</HTML>
Kompletní text pojednání o DHTML je k dispozici
na adrese http://www.idg.cz/computerworld/dhtml/index. html.
8 0475 / pah









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.