Professional Documents
Culture Documents
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Aby stworzy atrakcyjn stron WWW, nie wystarcza ju znajomo jzyka HTML.
Witryny wzbogacone przycigajcymi uwag uytkownika animacjami i elementami
interaktywnymi to w Internecie codzienno. Umieszczenie na stronie tych elementw
czsto przerasta umiejtnoci pocztkujcego webmastera.
101 praktycznych skryptw na stron WWW to ksika prezentujca gotowe do
wykorzystania, praktyczne skrypty napisane w jzyku JavaScript, ktre sprawi,
e strona "oyje" i stanie si bardziej atrakcyjna dla odbiorcy.
Dodaj do swojej strony skrypty obsugujce:
Formularze
Odnoniki
Pywajce napisy
Efekty ta
Animacje warstw
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Spis treci
Wstp ............................................................................................... 7
Rozdzia 1. Proste zdarzenia i obsuga myszy........................................................ 9
Skrypt 1.
Skrypt 2.
Skrypt 3.
Skrypt 4.
Skrypt 5.
Skrypt 6.
Skrypt 7.
Skrypt 8.
Skrypt 9.
Skrypt 10.
Skrypt 11.
Skrypt 12.
Spis treci
5
Skrypt 81. To z losowo zmieniajcych si obrazw [E][N6] ........................................142
Skrypt 82. Rozjanianie ta [E][N]..................................................................................143
Skrypt 83. ciemnianie ta [E][N]...................................................................................144
Skrypt 84. Pulsowanie ta [E][N] ....................................................................................144
Skorowidz...................................................................................... 189
Rozdzia 7.
Animacje warstw
Skrypt 85. [E][N6][O]
Uciekajcy obrazek.
Na ekranie wywietlany jest obrazek zapisany w pliku image1.gif (rysunek 7.1). Bdzie zmienia miejsce pooenia po najechaniu na niego mysz. W funkcji
ustawiamy pooenie warstwy w zalenoci od rozdzielczoci ekranu. Suy nam tutaj
do tego obiekt i jego waciwoci
i
odzwierciedlajce odpowiednio wysoko i szeroko ekranu.
Rysunek 7.1.
Widoczny obrazek
bdzie ucieka
przed wskanikiem
myszy
148
Rysunek 7.3.
Kolor ta ustawiamy
jako przezroczysty
Nas interesuj nastpujce funkcje:
, ktra zwraca losow liczb z przedziau
0 1 oraz
, ktra zwraca argument zaokrglony do najbliszej liczby cakowitej. Poniewa potrzebujemy losow warto cakowit z przedziau 0 7, obu
funkcji uywamy w sposb nastpujcy:
.
149
Znaczenie
Przybliona warto
2,718
logarytm naturalny z 2
0,693
logarytm naturalny z 10
2,302
logarytm o podstawie 2 z e
1,442
logarytm o podstawie 10 z e
0,434
liczba Pi
3,14159
!"#
0,707
!"
pierwiastek kwadratowy z 2
1,414
Znaczenie
$%
%
%
&
%
'(
)&
&*
'
(+
!
%
%,
Skrypt 85
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-.01/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
F G
150
151
W poprzednim skrypcie warstwa skakaa po ekranie, jeli najechalimy na ni kursorem myszy. Tym razem sprawmy, aby w miar pynnie sama przesuwaa si po ekranie. Przesunicie w poziomie osigamy, modyfikujc parametr warstwy.
Skrypt 86
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-.01/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
3 %(
3 33
3 +
3 &6T
F G
F &6%G
%&
&6%UI+%+IV
+
%+
K
&% F &&G
%&
&&UI+%+IV%6&
+
(%$6&T
K
152
153
Skrypt 87
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
3 %(
3 5
3
F '5
*G
3 &
5 - JX II P 5*J?5*J
& P
& P &
&
IYI P &
*&H6I'I%6&&
&
5 P
F 5 / N ZZ 5 -
2
%"4'5
*4W %(
K
Q : C3( 22/
-5!"/
-.01/
-HR1S
I'5
*I/
-1L 1
4'4
%6&
43%$&6? 3%$&
+
N[
*
[
'20&*
(%? &3
(? [
&F? M[4/
-./T6 %;D %9-./
-1L/
-HR1S/
-."/
Skrypt 88 [E][N6]
Tekst pynnie zmieniajcy kolor.
Skrypt ten jest rozwiniciem pomysu ze skryptu 87. Skoro moemy ciemnia i rozjania napis, moglibymy spowodowa, eby pynnie zmienia on swoj barw. Nie
bdziemy tu jednak generowa kadego koloru w funkcji
, jak poprzednio,
przygotujemy za to tablic barw. Bd odpowiedzialne za to dwie funkcje:
i .
Skrypt 88
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
154
!"G
F
- J PPG
!UV
!"
K
K
&%G
F !) - !"G
F
!) - !" PPG
!UV
K
K
&%G
'
F
!) / !" 22G
!U'PPV
K
K
K
F A)
A"G
F
- J PPG
AUV
A"
K
K
&%G
F A) - A"G
F
A) - A" PPG
AUV
K
K
&%G
'
F
A) /
A" 22G
AU'PPV
K
K
K
F H)
H"G
F
- J PPG
HUV
H"
K
K
&%G
F H) - H"G
F
H) - H" PPG
HUV
155
K
K
&%G
'
F
H) /
H" 22G
HU'PPV
K
K
K
F
- PPG
&
!UV - JX II P !UV*J?!UV*J
& P
AUV - JX II P AUV*J?AUV*J
& P
HUV - JX II P HUV*J?HUV*J
&
IYI P &
&"$&U(% J P V
&
K
K
F :"$&G
((5&%W W W W W W
((5&%W W W W W W
((5&%W W W W W W
((5&%W W W W W W M
((5&%W W W W W W N
((5&%W W W W W W
((5&%W W W W W W J
K
F '5
*G
*&H6I'I%6&&
&"$&U'V
' P
%(
F ' / &"$&&*
ZZ ' - %(
2%(
%"4'5
*4W %(
K
Q : C3( 22/
-5!"/
-.01/
-HR1S
I:"$&'5
*I/
-1L 1
4'4
%6&
43%$&6? 3%$&
+
N[
*
[
'20&*
(%? &3
(? [
&F? M[4/
-./T6 %;D %9-./
-1L/
-HR1S/
-."/
Ustalenie przej pomidzy kolorami jest spraw indywidualn. W powyszym przypadku zachodz nastpujce zmiany barw: biay->ty->zielony->seledynowy->
niebieski->fioletowy->czerowny->biay. Odpowiednie skadowe R, G, B i kody kolorw przedstawione s w tabeli 7.3.
156
#RRGGBB
255>255
255>255
255>0
Y))))))2/Y))))
255>0
255>255
0>0
Y))))2/Y))
0>0
255>255
0>255
Y))2/Y))))
0>0
255>0
255>255
Y))))2/Y))
0>255
0>0
255>255
Y))2/Y))))
255>255
0>0
255>0
Y))))2/Y))
255>255
0>255
0>255
Y))2/Y))))))
itd.
Skrypt 89
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-.01/
-"S/
Y+%+G
3%$&6?3%$&
$:*2&?
(%?$%&
(?
&F?
+
?
*
?
&62$:*2&?
K
Y+%+G
3%$&6?3%$&
$:*2&?
(%?$%&
(?
&F?
+
?
*
?
&62$:*2&?
K
-"S/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
F G
F &&G
&&UI+%+IV%6&
*
%
*
2
&&UI+%+IV%6&+
%+
157
158
159
Rysunek 7.6.
Wygenerowane
za pomoc warstw
wielokolorowe to
%6&
4&?YFF4
%6&
4&?YFFFF4
%6&
4&?*$WW4
%6&
4&?*$[W[W[4
160
W ten sposb stworzymy zestaw stylw osadzonych, ktrych z kolei uyjemy przy
generacji warstw ze znacznikiem ()*. Odpowiedzialny bdzie za to nastpujcy fragment kodu:
F
- J P J PPG
%
4-1L
I+%+4 P P 4I/-1L/4
+%
K
Skrypt 90
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-.01/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
&"$&
+ 06
F
- J PPG
&"$&UV
4*$4 P P 4WW4 P 2 P 44
&"$&U P JV
4*$4 P 2 P 4WW4 P P 44
K
F *D+W
G
%
4-"S 6(
I'%%I/4
F
- J P J PPG
% P
4Y+%+4 P P 4G(%?$%&4
% P
4+
?4 P + P 4
*
? &F?4
% P
4(?4 P P 4$:*2&?4 P &"$&UV
% P
4&62$:*2&?4 P &"$&UV
% P
4&(?W4 P + P 4WWK4
K
%
% P 4-"S/4
+%
%
44
K
Q : C3( 22/
-5!"/
-HR1S &
4+
4/
'''
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
F &&G
*D$6%&&T
W $6%&&.*
K
&% F &6%G
*D++T
W ++.*
K
F
- J P J PPG
%
4-1L
I+%+4 P P 4I/-1L/4
+%
K
Q : C3( 22/
-5!"/
-HR1S/
-."/
161
Warto zauway, e trzy literki xxx, znalazy si za znacznikiem +&,(-. nieprzypadkowo. Nie bd one widoczne, jako e zostan przykryte przez warstwy. S one jednak
niezbdne dla prawidowej interpretacji skryptu przez Internet Explorera w wersjach
poniej 6. Jeeli bowiem plik HTML nie zawiera adnej wywietlanej treci w sekcji
BODY (np. uytych przez nas znakw x), przegldarki te generuj warstwy o nieprawidowej szerokoci. atwo moemy si o tym przekona, usuwajc wspomniany
fragment kodu. Efekt bdzie mniej wicej taki jak na rysunku 7.7.
Rysunek 7.7.
Usunicie fragmentu
kodu powoduje bdne
dziaanie skryptu
162
163
164
165
F'% /
%T
2 &6T
ZZ '% - G
%(\
2 %(\
K
F6% /
%.*
2 &6.*
ZZ 6% - G
%(S
2 %(S
K
%"4%&&4W %(
K
Q : C3( 22/
-5!"/
-HR1S
4%&&4/
-1L 1
4+%+4 %6&
4(%?$%&4/
-A !5
4*D(*4/
-1L/
-HR1S/
-."/
Skrypt ten dziaa w sposb nastpujcy. Tworzymy warstw o nazwie 0 i umieszczamy na niej obrazek image1.jpg. Oczywicie plik o takiej nazwie musi znajdowa
si w podanej lokalizacji. Warstw t przesuwamy w funkcji w taki sposb,
by po osigniciu kocw ekranu odbijaa si od nich jak pika. Osigamy to, manipulujc zmiennymi 1 i /1 . Jeeli bieca pozycja xanimowanej warstwy jest
mniejsza od 1, zmienna 1 musi by dodatnia, jeeli natomiast pozycja ta jest wiksza lub rwna szerokoci ekranu, 1 musi przyj warto ujemn. Ze zmienn
/1 postpujemy analogicznie. Oczywicie, aby efekt by prawidowy, w obliczeniach naley uwzgldni szeroko i wysoko warstwy. Szeroko warstwy uzyskujemy dziki linii:
3 &6T
+%+FF%T
a wysoko:
3 &6.*
+%+FF%.*
166
Rysunek 7.9.
Obrazek jest
skalowany
do zadanych
wymiarw
167
168
169
Naley tylko pamita, aby kada spadaa z waciw sobie, rn od innych prdkoci. Uzyskujemy to dziki losowaniu dla kadej warstwy iloci pikseli, o jak ma
si przemieci w pojedynczym ruchu. Podobnie, losowana powinna by wsprzdna
xpooenia pocztkowego.
Skrypt 95
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
3 %("$&
+ 06
3 %(
3 %(3&%
F %+G
F
- PPG
F &&G
3 (%\
&
$6&T
2
&&UI&I P V%6&&F
(%\
K
%("$&UV
&
%(3&%
K
K
F %G
F
- PPG
F &&G
'
(%&&UI&I P V%6&(
' P
%("$&UV
F ' /
$6&.*
2 NG
'
3 (%\
&
$6
&T
2
&&UI&I P V%6&&F
(%\
%("$&UV
&
%(3&%
K
&&UI&I P V%6&(
'
K
K
%"4%4W %(
K
Q : C3( 22/
-5!"/
-.01/
-HR1S
4%+%4/
-1L 1
4&4
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(?
&F? 4/
-A !5
I%+*FI/
-1L/
170
171
*
('
(%? $%&
(?
&F? 4/
-A !5
I%+*FI/
-1L/
-1L 1
4&74
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(?
&F? 4/
-A !5
I%+*FI/
-1L/
-1L 1
4&84
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(?
&F? 4/
-A !5
I%+*FI/
-1L/
-. &*
44/"^_ %6-./
-HR1S/
-."/
Funkcja odpowiada za zainicjowanie niezbdnych tablic i zmiennych. Dokonujemy tu losowania prdkoci oraz pozycji xdla kadej warstwy. Ilo poziomw
prdkoci okrelana jest zmienn
3 . Za losowanie odpowiada wic prosta
konstrukcja:
&
%(3&%
172
przykadzie wszystkie one bd identyczne. Ktr z wersji wybra? Zaley to oczywicie od konkretnego zastosowania. Jeli chcemy, aby kada z warstw miaa swoje
wasne waciwoci, wybierzemy kod ze skryptu 95, jeli wszystkie maj by takie
same, kod ze skryptu 96.
Skrypt 96
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
3 %("$&
+ 06
3 %(
3 %(3&%
3 &6%5
F %+G
F
- &6%5 PPG
F &&G
&&UI&I P V%6&&F
&
$6&T
2
K
%("$&UV
&
%(3&%
K
K
F %G
F
- &6%5 PPG
F &&G
'
(%&&UI&I P V%6&(
' P
%("$&UV
F ' /
$6&.*
2 NG
'
&&UI&I P V%6&&F
&
$6&T
2
%("$&UV
&
%(3&%
K
&&UI&I P V%6&(
'
K
K
%"I%IW %(
K
Q : C3( 22/
-5!"/
-.01/
-HR1S
I%+%I/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
F
- &6%5 PPG
%
I-1L 1
4&I P P I4 I
% P
I%6&
43%$&6? 3%$& I
% P
I+
(' I
% P
I
*
N(' I
% P
I(%? $%& I
% P
I(? I
173
% P
I&F? 4/I
% P
I-A !5
4%+*F4/I
% P
I-1L/I
+%
K
+I-. &*
44/"^_ %6-./I
Q : C3( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-."/
Oczywicie kod ten naley umieci w ptli , gdzie zmienn sterujca jest .
Pozostao nam jeszcze podj decyzj, co zrobi w przypadku, kiedy dana warstwa
osignie prawy bd lewy brzeg ekranu. Najciekawiej bdzie, jeli w takiej sytuacji
odbije si ona od tego brzegu i zacznie przesuwa si w przeciwnym kierunku. Efekt
ten osigniemy, zmieniajc znak odpowiedniej wartoci w tablicy
2, czyli
piszc:
%("$&\UV
2%("$&\UV
Skrypt 97
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
174
175
% P
I&F? 4/I
% P
I-A !5
4%+*F4/I
% P
I-1L/I
+%
K
Q : C3( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-."/
Zamiast parametrw wystpuj tutaj tablice, jako e w kadym kroku generujemy pozycje oddzielnie dla kadej warstwy. W funkcji bdziemy wypenia wszystkie
tablice wartociami pocztkowymi w sposb nastpujcy (oczywicie instrukcje te
naley umieci w ptli ):
(%\UV
&
$6&T
2
%("$&SUV
&
%(3&%S
(&UV
&
N P
%
UV
&
N7 P
$HUV
N
Kod ten nie musi by a tak bardzo sparametryzowany w konkretnej realizacji, jednak
dziki temu kady moe uzyska najlepsze wedug niego ustawienia opisujce ruch
patkw. Wystarczy manipulowa podanymi parametrami. Najlepiej po prostu poeksperymentowa i dobra je wedug wasnego uznania.
176
Skrypt 98
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
3 %("$&S
+ 06
3 (%\
+ 06
3 %
+ 06
3 (&
+ 06
3 $H
+ 06
3 %(
3 %(3&%S
3 &6%5
F %+G
F
- &6%5 PPG
F &&G
(%\UV
&
$6&T
2
K
%("$&SUV
&
%(3&%S
(&UV
&
N P
%
UV
&
N7 P
$HUV
N
K
K
3 $
F %G
F
- &6%5 PPG
F &&G
6
(%&&UI&I P V%6&(
6 P
%("$&SUV
$HUV P
%
UV
'
(%
%$HUV (&UV P (%\UV
F ' /
$6&T
2 JG
'
$6&T
2 J
K
&&UI&I P V%6&&F
'
F 6 /
$6&.*
2 NG
6
2
(%\UV
&
$6&T
2
%("$&SUV
&
%(3&%S
(&UV
&
P
%
UV
&
N7 P N7
K
&&UI&I P V%6&(
6
K
K
%"I%IW %(
K
Q : C3( 22/
-5!"/
-.01/
177
-HR1S
I%+%I/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
F
- &6%5 PPG
%
I-1L 1
4&I P P I4 I
% P
I%6&
43%$&6? 3%$& I
% P
I+
(' I
% P
I
*
N(' I
% P
I(%? $%& I
% P
I(? I
% P
I&F? 4/I
% P
I-A !5
4%+*F4/I
% P
I-1L/I
+%
K
+I-. &*
44/"^_ %6-./I
Q : C3( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-."/
Aby efekt wyglda realistycznie, musimy zasymulowa ruch jednostajnie przyspieszony, kiedy obiekt spada, oraz jednostajnie opniony, kiedy wznosi si po odbiciu. Nie
178
Kierunek ruchu kontrolowany jest przez zmienn
, ktra moe przyjmowa
dwie wartoci dla ruchu w gr i
dla ruchu w d.
Nasza pika porusza si rwnie w poziomie. Ruch ten generowany jest przez cykliczne zwikszanie parametru warstwy zawierajcej obraz.
Skrypt 99
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
3 %(
3 %((
3 &(
3 $
3
I+I
3
3
N
F %+G
F &&G
&&UI$&&IV%6&&F
&(
$
$6&.*
2
K
K
6
'
F %G
'
(%&&UI$&&IV%6&&F
&&UI$&&IV%6&&F
PP'
6
(%&&UI$&&IV%6&(
F 6 - $ ]]
I+IG
6 P
%((PP
F 6 / $G
&&UI$&&IV%6&(
$
K
&%G
&&UI$&&IV%6&(
6
K
I+IG
I(I
&(
&( P
&$ 2 &(
F &( /
$G
&"
K
%"I%IW %(
K
&% F 6 / &( ]]
I(IG
6 2
%((22
F 6 - &(G
&&UI$&&IV%6&(
&(
K
&%G
&&UI$&&IV%6&(
6
K
%"I%IW %(
K
&% F 6 -
&( ]]
I(IG
I+I
F %(([M
%((22
%"I%IW %(
K
K
Q : C3( 22/
-5!"/
-.01/
-HR1S
I%+%I/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
F
- PPG
%
I-1L 1
4$&&4 I
% P
I%6&
43%$&6? 3%$& I
% P
I+
(' I
% P
I
*
N(' I
% P
I(%? $%& I
% P
I(? I
% P
I&F? 4/I
% P
I-A !5
4$&&*F4/I
% P
I-1L/I
+%
K
Q : C3( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-."/
179
180
Parametr
odpowiada za rozcignicie sinusoidy w poziomie, tzn. im mniejsza
bdzie ta warto, tym tor ruchu bdzie bardziej zagszczony,
odpowiada
za rozcignicie toru w pionie, a to umiejscowienie sinusoidy na ekranie.
Wszystkie te parametry mona dobra wedug wasnego uznania.
Skrypt 100
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
3 %(
3 '
3 (&
3 (%"(
3 %
3 %T
3 %&
F %+G
%&
*&H6I$&&I%6&
F &&G
%T
$6&T
K
&%G
%T
+
K
%&&F
K
3 ;
F %G
; P
%
6
&
%; (& P (%"(
'
(%%&&F
F ' / %T
2 '
181
%&&F
PP'
%&(
6
%"4%4W %(
K
Q : C3( 22/
-5!"/
-.01/
-HR1S
I%+%I/
-5!" 0AB0A
4C3(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
F
- PPG
%
I-1L 1
4$&&4 I
% P
I%6&
43%$&6? 3%$& I
% P
I+
(' I
% P
I
*
N(' I
% P
I(%? $%& I
% P
I(? I
% P
I&F? 4/I
% P
I-A !5
4$&&*F4/I
% P
I-1L/I
+%
K
Q : C3( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-."/
182
183
Ja wida, nie jest to nic bardzo skomplikowanego. Kod w warunku
/
zapewnia nam obsug przegldarki Netscape Navigator w wersji 4.5 4.7. Kod po
bdzie rozpoznawany przez Explorera, Oper i Navigatora w wersji 6. Teraz ju
tylko komponujemy wszystko w kod strony WWW i nasz napis tworzy animowan
sinusoid (rysunek 7.12).
Rysunek 7.12.
Warstwy poruszajce
si po sinusoidzie
Skrypt 101
-."/
-.01/
-
(2,3
452"6(4
4'
&
%
%277824/
-922 :6( (
; ; :%<=: 4 (:6;6
%:6(>+4 22/
-922 ? % 2&? %(%@&% 22/
-.01/
-"S/
Y+%+W Y+%+W Y+%+MW Y+%+NW Y+%+W Y+%+JG
3%$&6?3%$&
$:*2&?
(%?$%&
+
?
*
?
&62$:*2&?
K
-"S/
-5!" 0AB0A
4D3%(4 6(
4'D3%(4/
-922 B:6 (; (;*&<: $%E*D<6 C3(
F G
$
+ 06
'
D
F
- J PPG
$UDPPV
%' P
' P
M
K
184