You are on page 1of 42

IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

101 praktycznych skryptw


na stronie WWW
Autor: Marcin Lis
ISBN: 83-7197-879-0
Format: B5, stron: 196

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

Ksika przeznaczona jest zarwno dla osb pocztkujcych, jak i rednio


zaawansowanych (znajcych podstawy HTML-a, JavaScriptu czy DHTML-a). Kady
skrypt jest przedstawiony w postaci gotowej do uruchomienia. Wystarczy zatem wklei
go do swojej witryny, zupenie nie przejmujc si technicznymi aspektami jego
dziaania, aby osign zamierzony efekt. Dla osb bardziej zaawansowanych
zaprezentowane w ksice pomysy mog by inspiracj do tworzenia wasnych
projektw.

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.

Zdarzenie onLoad. Powitanie uytkownika [E][N][O]..................................10


Zdarzenie onUnload. Poegnanie uytkownika [E][N][O]............................11
Powitanie i poegnanie korzystajce z podanego imienia [E][N][O] ............11
Okno dialogowe wywietlane po najechaniu mysz na tekst [E][N6][O] .....13
Zamykanie okna przegldarki [E][N][O] .......................................................14
Zamykanie okna przegldarki potwierdzane przez uytkownika [E][N][O] .15
Zmiana napisu na pasku stanu [E][N][O].......................................................17
Zmiana kursora myszy na celownik [E][N6]..............................................18
Wybr ksztatu kursora z listy [E]..................................................................19
Blokowanie funkcji prawego przycisku myszy [E] .......................................22
Blokada prawego przycisku myszy rozrniajca typ przegldarki [E][N]...24
Blokada lewego przycisku myszy [E] ............................................................26

Rozdzia 2. Skrypty zwizane z formularzami....................................................... 29


Skrypt 13. Sprawdzenie iloci formularzy w dokumencie [E][N][O] ..............................30
Skrypt 14. Sprawdzenie czy uytkownik poda wymagane dane [E][N][O] ....................31
Skrypt 15. Nadanie niewypenionym polom zadanej wartoci [E][N][O]........................35
Skrypt 16. Kalkulator wykonujcy podstawowe dziaania arytmetyczne [E][N6][O] .....37
Skrypt 17. Przeszukiwanie tekstu [E][N][O] ....................................................................42
Skrypt 18. Przycisk zmieniajcy kolor po najechaniu na kursorem myszy [E][N6] ......44
Skrypt 19. Przycisk samoczynnie zmieniajcy kolor [E][N6] ..........................................47
Skrypt 20. Jednoczesna zmiana koloru przycisku i tekstu na przycisku [E][N6] .............49
Skrypt 21. Automatyczne przenoszenie kursora
midzy elementami formularza [E][N][O] .....................................................................50
Skrypt 22. Zablokowanie moliwoci wpisywania liter w formularzu [E].......................52
Skrypt 23. Pole tekstowe automatycznie zmieniajace swoj wielko [E].......................53

Rozdzia 3. Okna i czas ..................................................................................... 55


Skrypt 24. Otworzenie nowego, pustego okna przegldarki [E][N] .................................56
Skrypt 25. Otworzenie nowego okna, o zadanych rozmiarach i zawartoci [E][N] .........58
Skrypt 26. Wywietlenie ostrzeenia o niewaciwej rozdzielczoci ekranu [E][N][O] ..60
Skrypt 27. Zmiana koloru paska przewijania [E]..............................................................61
Skrypt 28. Odmierzanie czasu [E][N][O] .........................................................................63
Skrypt 29. Odmierzanie czasu z moliwoci zatrzymania zegara [E][N][O] .................65
Skrypt 30. Przewijanie treci strony [E][O] ......................................................................65
Skrypt 31. Pywajcy ekran [E][N4][O] ...........................................................................68
Skrypt 32. Uciekajcy ekran [E][O]..................................................................................69

101 praktycznych skryptw na stronie WWW


Skrypt 33. Zegar cyfrowy [E][N][O] ................................................................................69
Skrypt 34. Wywietlenie aktualnej daty i czasu [E][N][O] ..............................................72
Skrypt 35. Wywietlenie aktualnej daty i czasu na przycisku [E][N][O] .........................74
Skrypt 36. Wywietlenie aktualnej daty i czasu na pasku stanu [E][N][O]......................75
Skrypt 37. Wywietlenie biecego dnia tygodnia [E][N][O] ..........................................76
Skrypt 38. Wywietlenie wartoci zwizanych z dat i czasem [E][N][O] ......................78
Skrypt 39. Zegar podajcy czas w formacie binarnym [E][N][O]....................................81

Rozdzia 4. Odnoniki ........................................................................................ 83


Skrypt 40. Automatyczne zaadowanie strony [E][N][O].................................................83
Skrypt 41. Automatyczne zaadowanie strony bez uycia JavaScriptu [E][N][O] ...........84
Skrypt 42. Przyciski bdce jednoczenie odnonikami [E][N][O]..................................85
Skrypt 43. Odnoniki na licie rozwijanej [E][N][O] .......................................................86
Skrypt 44. Odnoniki na licie rozwijanej z bezporedni zmian strony [E][N][O].......88
Skrypt 45. Odsyacze z dodatkowymi opisami [E][N][O]................................................88
Skrypt 46. Odnoniki na licie rozwijanej otwierane w nowym oknie [E][N] .................90
Skrypt 47. Odnoniki na licie rozwijanej z moliwoci wyboru okna [E][N]...............92
Skrypt 48. Uniemoliwienie wczytania strony do ramki [E][N][O].................................93
Skrypt 49. Dodawanie odsyacza do zakadki Ulubione [E] .........................................94
Skrypt 50. Ustawianie wybranej strony jako startowej [E]...............................................95
Skrypt 51. Akapit tekstowy udajcy odnonik [E][N6][O]...............................................96
Skrypt 52. Dodatkowe wyrnienie odnonika [E] ..........................................................97

Rozdzia 5. Pywajce napisy ........................................................................... 101


Skrypt 53. Napis przesuwajcy si w poziomie w lewo [E][N][O] ................................101
Skrypt 54. Napis przesuwajcy si w poziomie w lewo
uwzgldniajcy wielko okna tekstowego [E][N6][O]...............................................102
Skrypt 55. Pywajcy tekst odbijajcy si od lewej i prawej strony [E][O]....................104
Skrypt 56. Zamiana tekstu przez losowe wstawianie znakw [E][N][O] .......................105
Skrypt 57. Zamiana tekstw poprzez wymian znakw od prawej strony [E][N][O]....107
Skrypt 58. Zamiana tekstw poprzez wymian znakw od lewej strony [E][N][O] ......108
Skrypt 59. Symulacja pisania na klawiaturze [E][N][O] ................................................109
Skrypt 60. Tekst rozwijany w praw stron i zwijany w lewo [E][N][O] ......................111
Skrypt 61. Tekst rozwijany w praw stron i zwijany w prawo [E][N][O] ....................112
Skrypt 62. Pywajcy tekst na pasku stanu [E][N][O] ....................................................113
Skrypt 63. Pywajca data na pasku stanu [E][N][O] .....................................................114
Skrypt 64. Pywajca data i czas na pasku stanu [E][N][O] ...........................................116
Skrypt 65. Pywajca data i czas na pasku stanu II [E][N][O]........................................117
Skrypt 66. Data i czas na pasku stanu pywajca w obie strony [E][N][O]....................119
Skrypt 67. Pywajcy tekst na pasku tytuu okna przegldarki [E][N6][O]....................120
Skrypt 68. Zegarek w tytule okna [E][N6][O] ................................................................122

Rozdzia 6. Efekty ta ...................................................................................... 125


Skrypt 69. To zmieniajce si po najechaniu na obrazek [E][N6].................................125
Skrypt 70. To zmieniajce si po najechaniu na obrazek II [E][N6] .............................127
Skrypt 71. Wybr koloru ta z listy rozwijanej [E][N] ...................................................128
Skrypt 72. To zmieniajce cyklicznie kolor [E][N] .......................................................129
Skrypt 73. To zmieniajce kolor losowo [E][N]............................................................130
Skrypt 74. To zmieniajce kolor losowo II [E][N] ........................................................131
Skrypt 75. Zmiana koloru ta w komrce tabeli [E][N6] ................................................132
Skrypt 76. Wybr koloru ta przy uyciu myszy [E][N6]...............................................134
Skrypt 77. Wybr koloru ta przy uyciu myszy II [E][N6] ...........................................136
Skrypt 78. Pywajce to [E][N6]....................................................................................139
Skrypt 79. To przesuwajce si w poziomie [E][N6] ....................................................140
Skrypt 80. To z cyklicznie zmieniajcych si obrazw [E][N6] ...................................141

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

Rozdzia 7. Animacje warstw ........................................................................... 147


Skrypt 85. Uciekajcy obrazek [E][N6][O] ....................................................................147
Skrypt 86. Pywajca warstwa [E][N4][O] .....................................................................151
Skrypt 87. Pulsujcy tekst [E][N6][O]............................................................................152
Skrypt 88. Tekst pynnie zmieniajcy kolor [E][N6]......................................................153
Skrypt 89. Efekt kurtyny [E][O] .....................................................................................156
Skrypt 90. Wygenerowane dynamicznie to [E][N4]......................................................158
Skrypt 91. Kurtyna z dynamicznie generowanymi warstwami [E][N4][O] ...................161
Skrypt 92. Obrazek odbijajcy si od bokw ekranu [E][O] ..........................................164
Skrypt 93. Skalowanie obrazka [E][N6] .........................................................................165
Skrypt 94. Pulsujcy obrazek [E][N6] ............................................................................167
Skrypt 95. Spadajce warstwy [E][O].............................................................................168
Skrypt 96. Spadajce warstwy generowane dynamicznie [E][O] ...................................171
Skrypt 97. Patki niegu przemieszczajce si w dwch kierunkach [E][O] ..................173
Skrypt 98. Realistycznie padajcy nieg [E][O] .............................................................175
Skrypt 99. Odbijajca si pika [E][O]............................................................................177
Skrypt 100. Pika poruszajca si po sinusoidzie [E][N6][O] ........................................180
Skrypt 101. Pywajce warstwy [E][N][O] .....................................................................181

Zakoczenie .................................................................................. 185


Skrypt 102. Pywajca sinusoida [E][N][O] ...................................................................185

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

101 praktycznych skryptw na stronie WWW

Obrazek znajdujcy si na warstwie moemy przygotowa za pomoc dowolnego


edytora graficznego, np. Paint Shop Pro (rysunek 7.2). Zapisujemy go w formacie ,
pamitajc jednak o ustawieniu koloru ta jako przezroczystego (rysunek 7.3). Kiedy
uytkownik najedzie mysz na warstw, wykonana zostanie funkcja  , ktra dokona przesunicia warstwy. Kierunek przesunicia jest losowany. Korzystamy tutaj
z obiektu 
, ktry udostpnia nam rne stae (tabela 7.1) i funkcje matematyczne
(tabela 7.2).
Rysunek 7.2.
Program Paint
Shop Pro pozwoli
na przygotowanie
grafiki uywanej
w skrypcie

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:

         

Zmiennej tej uywamy nastpnie jako parametru w instrukcji warunkowej  


 .

Rozdzia 7. Animacje warstw

149

Tabela 7.1. Stae matematyczne dostpne w JavaScripcie


Nazwa staej

Znaczenie

Przybliona warto

staa Eulera (e)

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

 !"#

pierwiastek kwadratowy z 1/2

0,707

 !"

pierwiastek kwadratowy z 2

1,414

Tabela 7.2. Funkcje matematyczne dostpne w JavaScripcie


Nazwa metody

Znaczenie

$%

Zwraca warto bezwzgldn argumentu.

%

Zwraca arcus cosinus argumentu.

%

Zwraca arcus sinus argumentu.

 

Zwraca tangens sinus argumentu.

&

Zwraca najmniejsz liczb cakowit wiksz bd rwn argumentowi.

%

Zwraca cosinus argumentu.

'(

Zwraca e do potgi rwnej argumentowi.

)&

Zwraca najwiksz liczb cakowit mniejsz bd rwn argumentowi.

&*

Zwraca logarytm dziesitny argumentu.

 '

Zwraca wikszy z podanych dwch argumentw.



Zwraca mniejszy z podanych dwch argumentw.

(+

Zwraca warto bdc argumentem pierwszym podniesionym do potgi


rwnej argumentowi drugiemu.

 

Zwraca warto pseudolosow z zakresu 0 1.

!

Zwraca warto argumentu zaokrglon do najbliszej liczby cakowitej.

%

Zwraca sinus argumentu.

%,

Zwraca pierwiastek kwadratowy argumentu.

 

Zwraca tangens argumentu.

Skrypt 85
-." /
-.01/
- (2,3
452"6(4 
4' &  %
%277824/
-922 :6( ( ; ; :%<=: 4 ( :6;6 %:6(>+4 22/
-922 ?  % 2 &? %(%@ &% 22/
-.01/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
F G

150

101 praktycznych skryptw na stronie WWW


%&
*&H6I+ %+ I%6&
%&(
% *    2 J
%&&F
%+   2 7
K
F 3G
(L &
( %%&(
&FL &
( %%&&F
F % (L &
(L &
% *    2 J
F % &FL &
&FL &
%+   2 7

         
%+ G
 %  ? G&FL &0
 (L &0
2J $ :K
 %  ? G&FL &0
J (L &0
2J $ :K
 %  ? G&FL &0
J (L &0
 $ :K
 % M ? G&FL &0
J (L &0
J $ :K
 % N ? G&FL &0
 (L &0
J $ :K
 %  ? G&FL &0
2J (L &0
J $ :K
 % J ? G&FL &0
2J (L &0
 $ :K
 % O ? G&FL &0
2J (L &0
J $ :K
K
+"(L &
(L & P (L &0
+FL &
&FL & P &FL &0
F +"(L & - 
+"(L &
% *  2 J
F +"(L & / % *  2 J
+"(L &

F +FL & - 
+FL &
%+ 2 J
F +FL & / %+ 2 J
+FL &

%&(
+"(L &
%&&F
+FL &
K
 Q : C 3 ( 22/
-5!"/
-HR1S  
44/
-1L 1
4+ %+ 4
"S
43%$&6? 3%$&
&?  (%? $%&
(?  &F? 4
 %R3
434/
- A !5
4 *'*F4/
-1L/
-/
" D :% %6
-/
-HR1S/
-." /

Rozdzia 7. Animacje warstw

151

Skrypt 86. [E][N4][O]


Pywajca warstwa (rysunek 7.4).
Rysunek 7.4.
Po wczytaniu skryptu
warstwa zaczyna
pyn po ekranie

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
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
3  %(

3  33

3  +

3  & 6T

F G
F & 6%G
%&
& 6%UI+ %+ IV
+
%+ 
K
&% F  &&G
%&
 &&UI+ %+ IV%6&
+
( %$6&T 
K

152

101 praktycznych skryptw na stronie WWW




K
F (;%G
F  - + 2 & 6T G
PP
K
&%G


33
233
K
%&&F
( %%&&F P 33
%"4(;%4W %(
K
 Q : C 3 ( 22/
-5!"/
-HR1S  
4(;%4/
-1L 1
4+ %+ 4
%6&
43%$&6?3%$& $ :*2&?
(%? $%& (?
&F? + ? * ?
& 62$ :*2&?4/
+  %  +
-1L/
-HR1S/
-." /

Warstwa pywa w poziomie w prawo i w lewo. Ilo pikseli, o ktr ma nastpi


przesunicie w pojedynczym kroku, definiujemy, ustalajc warto zmiennej . Dokonywane jest to w funkcji . Moemy za jej pomoc dodatkowo regulowa prdko przesuwu. Trzeba jednak pamita, e wpywa to w znacznym stopniu na pynno
ruchu. Tzn. im wiksza warto zmiennej , tym warstwa bdzie bardziej skaka.
Lepiej jednak korzysta z parametru funkcji   , ktry okrela, co jaki czas
nastpi kolejne wywoanie funkcji  .

Skrypt 87. [E][N6][O]


Pulsujcy tekst.
Pulsowanie tekstu, a dokadniej jego ciemnianie i rozjanianie uzyskujemy w bardzo
prosty sposb. Definiujemy warstw, na ktrej bdzie znajdowa si napis, a nastpnie cyklicznie zmieniamy atrybut jej stylu o nazwie . Stosujemy zatem konstrukcj:
 && ;+ #+ %+6%6&&
:&

Sam definicj koloru konstruujemy z poszczeglnych skadowych R, G, B, podobnie


jak w skryptach 82 84, gdzie zmienialimy barw ta.

Rozdzia 7. Animacje warstw

153

Skrypt 87
-." /
-.01/
- (2,3
452"6(4 
4' &  %
%277824/
-922 :6( ( ; ; :%<=: 4 ( :6;6 %:6(>+4 22/
-922 ?  % 2 &? %(%@ &% 22/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
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 : C 3 ( 22/
-5!"/
-.01/
-HR1S  
I'5 *I/
-1L 1
4'4
%6&
43%$&6? 3%$&
+
N[
*
[
'20&*

(%? & 3
(? [
&F? M[4/
-./T 6   %;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

101 praktycznych skryptw na stronie WWW


-922 :6( ( ; ; :%<=: 4 ( :6;6 %:6(>+4 22/
-922 ?  % 2 &? %(%@ &% 22/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
3  %(

3  %(

3  '

3  &" $&
+ 0 6
3  !
+ 0 6
3  A
+ 0 6
3  H
+ 0 6
F (( 5&%!)W A)W H)W !"W A"W H"W (%G
F !)

!"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


Rozdzia 7. Animacje warstw

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 : C 3 ( 22/
-5!"/
-.01/
-HR1S  
I :" $&'5 *I/
-1L 1
4'4
%6&
43%$&6? 3%$&
+
N[
*
[
'20&*

(%? & 3
(? [
&F? M[4/
-./T 6   %;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

101 praktycznych skryptw na stronie WWW

Tabela 7.3. Przejcia kolorw dla skryptu 87


Lp.

#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))))))

Tabel t naley czyta nastpujco. W iteracji (kolumna lp.) 0 skadowa R zmienia si


od 255 do 255, czyli ma warto sta. Podobnie skadowa G cay czas jest rwna 255.
Skadowa B zmienia si od 255 do 0. Ostatecznie prowadzi to do pynnego przejcia
od koloru o kodzie !!!!!! (biay) do koloru o kodzie !!!!"" (ty). Kolejne iteracje
(1 6) definiuj kolejne zmiany skadowych R, G i B.
Generacj przej tonalnych zajmuje si funkcja   !#$%!#$&!#$#$%#
&#$. Jej parametry okrelaj kierunek zmian poszczeglnych skadowych koloru.
Parametry z liter F (od ang. from) okrelaj, od jakiej wartoci ma si rozpocz iteracja, parametry z liter T (od ang. to), na jakiej wartoci ma si zakoczy. Parametr
 okrela numer kolejnej iteracji, a tym samym miejsce w wynikowej tabeli kolorw.
Parametry kolejnych wywoa funkcji    odczytujemy bezporednio
z tabeli 7.3. Zatem zerow iteracj okrela wywoanie:
(( 5&%W W W W W W 

iteracj pierwsz wywoanie:


(( 5&%W W W W W W 

itd.

Skrypt 89. [E][O]


Efekt kurtyny.
Przykad ten umoliwi nam uzyskanie efektu rozsuwajcej si kurtyny odkrywajcej
zawarto strony WWW (rysunek 7.5). Wykorzystamy do tego dwie warstwy, ktre
bd przesuway si od rodka na boki. W celu ustalenia wielkoci warstw uyjemy
znanych ju nam waciwoci

 i  
obiektu  . Odpowiednich przypisa dokonamy w wywoywanej przy zaadowaniu dokumentu funkcji . Sama
animacja bdzie wykonywana w funkcji  .

Rozdzia 7. Animacje warstw


Rysunek 7.5.
Zoona z warstw
kurtyna odsania
elementy strony WWW

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
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
F G
F  &&G
 &&UI+ %+ IV%6& * 
% *  2 
 &&UI+ %+ IV%6&+
%+  

157

158

101 praktycznych skryptw na stronie WWW


 &&UI+ %+ IV%6&&F

 &&UI+ %+ IV%6& * 
% *  2 
 &&UI+ %+ IV%6&+
%+  
 &&UI+ %+ IV%6&&F
%+  
K

%+    
K
F (;%G
F  &&G
'
( % &&UI+ %+ IV%6&&F

( % &&UI+ %+ IV%6&+ 

( % &&UI+ %+ IV%6&+ 
 &&UI+ %+ IV%6&&F
' P 
 &&UI+ %+ IV%6&+
 2 
 &&UI+ %+ IV%6&+
 2 
K
K
F % G
F  / G
(;%
%"4% 4W 
22
K
K
 Q : C 3 ( 22/
-5!"/
-HR1S  
44/
-. &*
44/
-1L 
4+ %+ 4 %6&
44/
-1L/
-1L 
4+ %+ 4 %6&
44/
-1L/
-1L %6&
4(%? $%&4/
-0 .!)
4D 3 %(?% 4/ -0/
-1L/
-./
-/
" D :% %6
-/
-HR1S/
-." /

Skrypt 90. [E][N4]


Wygenerowane dynamicznie to.
Skrypt ten bdzie generowa wielokolorowe to. Utworzymy w tym celu du ilo
warstw, z ktrych kada kolejna bdzie ma nieco zmieniony kolor. Nastpnie wywietlilimy je wszystkie na ekranie (rysunek 7.6). Kolor (w postaci liczbowej) dla
warstwy moemy zdefiniowa na cztery sposoby:

Rozdzia 7. Animacje warstw

159

Rysunek 7.6.
Wygenerowane
za pomoc warstw
wielokolorowe to

%6&
4&?YFF4
%6&
4&?YFFFF4
%6&
4&?*$WW4
%6&
4&?*$[W[W[4

Najwygodniejsze w tym przypadku byo podanie wartoci skadowych RGB w postaci


trzech liczb dziesitnych z zakresu 0 255. Zbudujemy wic na pocztek tablic kolorw, manipulujc kolorem czerwonym i niebieskim w nastpujcy sposb:
&" $&
+ 0 6
F 
  - J P 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

Tak stworzon tablic wykorzystamy do wygenerowania odpowiedniej iloci warstw,


za co odpowiedzialna bdzie funkcja  '. Jako parametry przyjmie ona szeroko i wysoko okna, przy czym dla uproszczenia wykorzystamy wycznie parametr dotyczcy szerokoci:
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
+%
K

160

101 praktycznych skryptw na stronie WWW

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
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
&" $&
+ 0 6
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 : C 3 ( 22/
-5!"/
-HR1S &
4+ 4/
'''
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(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 : C 3 ( 22/
-5!"/
-HR1S/
-." /

Rozdzia 7. Animacje warstw

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

Przykad ten naley te traktowa jako pokaz moliwoci dynamicznego generowania


warstw. Stosowanie go w praktyce napotka na spore problemy ze wzgldu na wolne
dziaanie i due zuycie zasobw systemowych. Trzeba pamita, e wygenerowalimy 512 warstw.

Skrypt 91. [E][N4][O]


Kurtyna z dynamicznie generowanymi warstwami.
Poprzedni skrypt pokaza nam, jak generowa warstwy z poziomu JavaScript, moemy wiedz t wykorzysta do zmodyfikowania naszego przykadu z rozsuwajc si
kurtyn (skrypt 89). Za wygenerowanie odpowiedniego stylu bdzie teraz odpowiedzialny nastpujcy kod:
F & 6%G
%
4-"S 6(
I'%%I/4
% P
4Y+ %+  G3%$&6?3%$& $ :*2&? 4
% P
4(%? $%& (? &F? + ? * ?4
% P
4& 62$ :*2&?&(?W4
% P
%+   P 4W4
% P
% *  2 M7 P 4W K4
% P
4Y+ %+  G3%$&6?3%$& $ :*2&? 4

162

101 praktycznych skryptw na stronie WWW


% P
4(%? $%& (? &F?4 P %+   P 44
% P
4+ ? * ?4
% P
4& 62$ :*2&?&(?W4
% P
%+   P 4W4
% P
% *  2 M7 P 4W K4
% P
4-"S/4
+%
K

Wystarczy teraz wprawi tak wygenerowane warstwy w ruch. Dokonujemy tego


w sposb analogiczny jak w skrypcie 89, manipulujc parametrami   oraz  

warstw. W przypadku przegldarki Netscape uywamy metody   w postaci:


& 6%U ;+ #+ %+6VFF%FF%.W FF%L

gdzie offsetH to przesunicie warstwy w poziomie (w pikselach), a offsetV przesunicie w pionie.


Skrypt 91
-." /
-.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
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
F & 6%G
%
4-"S 6(
I'%%I/4
% P
4Y+ %+  G3%$&6?3%$& $ :*2&? 4
% P
4(%? $%& (? &F? + ? * ?4
% P
4& 62$ :*2&?&(?W4
% P
%+   P 4W4
% P
% *  2 M7 P 4W K4

Rozdzia 7. Animacje warstw


% P
4Y+ %+  G3%$&6?3%$& $ :*2&? 4
% P
4(%? $%& (? &F?4 P %+   P 44
% P
4+ ? * ?4
% P
4& 62$ :*2&?&(?W4
% P
%+   P 4W4
% P
% *  2 M7 P 4W K4
% P
4-"S/4
+%
K
F G
F  &&G
 &&UI+ %+ IV%6& * 
% *  2 
 &&UI+ %+ IV%6&+
%+  
 &&UI+ %+ IV%6&&F

 &&UI+ %+ IV%6& * 
% *  2 
 &&UI+ %+ IV%6&+
%+  
 &&UI+ %+ IV%6&&F
%+  
K

%+    
K
F (;%G
F  &&G
'
( % &&UI+ %+ IV%6&&F

( % &&UI+ %+ IV%6&+ 

( % &&UI+ %+ IV%6&+ 
 &&UI+ %+ IV%6&&F
' P 
 &&UI+ %+ IV%6&+
 2 
 &&UI+ %+ IV%6&+
 2 
K
&% F & 6%G
& 6%UI+ %+ IVFF%2W
& 6%UI+ %+ IVFF%PW
K
K
F % G
F  / G
(;%
%"4% 4W 
22
K
K
 Q : C 3 ( 22/
-5!"/
-HR1S  
44/
-. &*
44/
-1L 
4+ %+ 4 %6&
44/
-1L/
-1L 
4+ %+ 4 %6&
44/
-1L/
-1L %6&
4(%? $%&4/
-0 .!)
4D 3 %(?% 4/ -0/
-1L/
-./
-/
" D :% %6
-/
-HR1S/
-." /

163

164

101 praktycznych skryptw na stronie WWW

Skrypt 92. [E][O]


Obrazek odbijajcy si od bokw ekranu (rysunek 7.8).
Rysunek 7.8.
Widoczny obrazek
bdzie pywa
po ekranie, odbijajc
si od jego bokw

Efekt obrazka pywajcego po ekranie i odbijajcego si od jego bokw osigniemy,


manipulujc parametrami   oraz  obiektu / odpowiedniej warstwy. Niezbdne jest rwnie oczywicie wykrywanie kolizji z brzegami okna przegldarki.
Funkcje te realizuje kod w skrypcie 92.
Skrypt 92
-." /
-.01/
- (2,3
452"6(4 
4' &  %
%277824/
-922 :6( ( ; ; :%<=: 4 ( :6;6 %:6(>+4 22/
-922 ?  % 2 &? %(%@ &% 22/
-.01/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
3  %(
N
3  %(\

3  %(S

3  6%
W '%

F %&&G
3  %T
$6&T 
3  %.* 
$6&.* 
3  & 6T
+ %+ FF%T 
3  & 6.* 
+ %+ FF%.* 
'%
'% P %(\
6%
6% P %(S
+ %+ %6&&F
'%
+ %+ %6&(
6%

Rozdzia 7. Animacje warstw

165

F'% /
%T 2 & 6T  ZZ '% - G
%(\
2 %(\
K
F6% /
%.*  2 & 6.*  ZZ 6% - G
%(S
2 %(S
K
%"4%&&4W %(
K
 Q : C 3 ( 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%.* 

Skrypt 93. [E][N6]


Skalowanie obrazka.
Manipulujc waciwociami  
i

 umieszczonego na warstwie obiektu obrazka definiowanego znacznikiem +)%., moemy osign ciekawy efekt jego przeskalowania. Moe on np. pynnie powiksza si od zera, a do osignicia swoich
penych wymiarw (rysunek 7.9).
Skrypt 93
-." /
-.01/
- (2,3
452"6(4 
4' &  %
%277824/
-922 :6( ( ; ; :%<=: 4 ( :6;6 %:6(>+4 22/
-922 ?  % 2 &? %(%@ &% 22/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/

166

101 praktycznych skryptw na stronie WWW

Rysunek 7.9.
Obrazek jest
skalowany
do zadanych
wymiarw

-922 B:6 (; (;*&< :   $%E*D<6 C 3 (


3  %(

3  %;\
M
3  %;S

3  %(\

3  %(S

3  %(%

3  *R$D
F % +G
*R$D
*&H6I$ ;:I
%(\
 &%;\  %(%
%(S
 &%;S  %(%
K
F %;G
T
*R$D+ 
.
*R$D * 
F T - %;\ ]] . - %;SG
*R$D+
T P %(\
*R$D * 
. P %(S
%"4%;4W %(
K
K
 Q : C 3 ( 22/
-5!"/
-.01/
-HR1S  
I% +%;I/
-. 0A
44/"^_ %6-./
-1L 1
4* 64 0A
44/
- A !5
4 **F4
0 
4$ ;:4
1
4$ ;:4
.A."
44
T1".
44/
-1L/
-HR1S/
-." /

Rozdzia 7. Animacje warstw

167

Ilo krokw, w ktrych obrazek zostanie powikszony do swojej oryginalnej wielkoci,


definiowany jest poprzez zmienn  . Okrela ona tym samym jako i, czciowo,
szybko caej animacji. Drugim parametrem wpywajcym na prdko dokonywanych zmian jest znana nam dobrze zmienna  odpowiadajca za czas, ktry ma
upyn pomidzy kolejnymi wywoaniami funkcji   .
W kadym wywoaniu funkcji    zwikszamy wysoko obrazka o wielko
 2, natomiast szeroko o wielko  -. Parametry  2 i  - wyliczamy
w funkcji   na podstawie zdefiniowanej wczeniej w zmiennej   iloci
krokw oraz wielkoci obrazka. Su do tego wzory:
%(\
 &%;\  %(%
%(S
 &%;S  %(%

Skrypt 94. [E][N6]


Pulsujcy obrazek.
Skrypt ten jest modyfikacj skryptu 93. Powoduje on, e zdefiniowany na warstwie
obrazek cyklicznie zwiksza i zmniejsza swoje rozmiary. Efekt ten osigamy poprzez
zmian znaku wartoci  2 i  - w przypadku, gdy wielko obrazu jest mniejsza
od zera lub wiksza od wielkoci oryginalnej.
Skrypt 94
-." /
-.01/
- (2,3
452"6(4 
4' &  %
%277824/
-922 :6( ( ; ; :%<=: 4 ( :6;6 %:6(>+4 22/
-922 ?  % 2 &? %(%@ &% 22/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
3  %(

3  %;\
M
3  %;S

3  %(\

3  %(S

3  %(%

3  *R$D
F % +G
*R$D
*&H6I$ ;:I
%(\
 &%;\  %(%
%(S
 &%;S  %(%
K
F %;G
T
*R$D+ 
.
*R$D * 
F 
T /
%;\ ZZ . /
%;S ZZ
T -
 ZZ . -


168

101 praktycznych skryptw na stronie WWW


G
%(\
2%(\
%(S
2%(S
K
*R$D+
T P %(\
*R$D * 
. P %(S
%"4%;4W %(
K
 Q : C 3 ( 22/
-5!"/
-.01/
-HR1S  
I% +%;I/
-. 0A
44/"^_ %6-./
-1L 1
4* 64 0A
44/
- A !5
4 **F4
0 
4$ ;:4
1
4$ ;:4
.A."
44
T1".
44/
-1L/
-HR1S/
-." /

Skrypt 95. [E][O]


Spadajce warstwy.
Skrypt ten pozwala na uzyskanie efektu padajcego niegu (rysunek 7.10), deszczu
czy te spadania innego typu obiektw. W czasie walentynek, na niektrych stronach
spotyka si na przykad spadajce serca. W najprostszym przypadku zadanie to jest
dosy atwe w realizacji. Definiujemy na stronie odpowiedni ilo warstw zawierajcych obrazki o zadanym motywie, a nastpnie wprawiamy je w ruch.
Rysunek 7.10.
Padajcy na stronie
nieg

Rozdzia 7. Animacje warstw

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
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
3  %(" $&
+ 0 6
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 : C 3 ( 22/
-5!"/
-.01/
-HR1S  
4% +% 4/
-1L 1
4&4
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(? 
&F? 4/
- A !5
I%+*FI/
-1L/

170

101 praktycznych skryptw na stronie WWW


-1L 1
4&4
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(? 
&F? 4/
- A !5
I%+*FI/
-1L/
-1L 1
4&4
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(? 
&F? 4/
- A !5
I%+*FI/
-1L/
-1L 1
4&M4
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(? 
&F? 4/
- A !5
I%+*FI/
-1L/
-1L 1
4&N4
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(? 
&F? 4/
- A !5
I%+*FI/
-1L/
-1L 1
4&4
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(? 
&F? 4/
- A !5
I%+*FI/
-1L/
-1L 1
4&J4
%6&
43%$&6? 3%$&
+
('
*
('
(%? $%&
(? 
&F? 4/
- A !5
I%+*FI/
-1L/
-1L 1
4&O4
%6&
43%$&6? 3%$&
+
('

Rozdzia 7. Animacje warstw

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&%

W podobny sposb losujemy pozycj warstwy na ekranie. Uwzgldniamy tu jednak


wielko ekranu i szeroko warstw. Odpowiada za to konstrukcja:
3  (%\
 &     $6&T 2 N&T 

Przemieszczanie warstw jest realizowane w wywoywanej cyklicznie funkcji .


Modyfikujemy waciwo  kadej warstwy, stosujc przypisanie:
 &&UI&I P V%6&(
'

Skrypt 96. [E][O]


Spadajce warstwy generowane dynamicznie.
Skrypt ten jest modyfikacj skryptu 95. Realizuje on taki sam efekt, jednak tym razem
warstwy generowane s dynamicznie. Dziki temu kod skryptu jest krtszy, pozbawia
nas to jednak moliwoci wpywania na wygld kadej warstwy z osobna. W tym

172

101 praktycznych skryptw na stronie WWW

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
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
3  %(" $&
+ 0 6
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 : C 3 ( 22/
-5!"/
-.01/
-HR1S  
I% +% I/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
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

Rozdzia 7. Animacje warstw

173

% P
I&F? 4/I
% P
I- A !5
4%+*F4/I
% P
I-1L/I
+%
K
+I-. &*
44/"^_ %6-./I
 Q : C 3 ( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-." /

Skrypt 97. [E][O]


Patki niegu przemieszczajce si w dwch kierunkach.
Skrypt 95 pokaza nam, w jaki sposb wygenerowa spadajce z ekranu warstwy.
Jako obrazw uylimy wtedy patkw niegu. Jednak nieg z reguy przemieszcza
si rwnie w kierunku poziomym. Aby wic efekt by bardziej realistyczny, powinnimy doda przemieszczanie warstw w poziomie.
Nie jest to oczywicie skomplikowana modyfikacja. Uyjemy dwch tablic do okrelania prdkoci warstw. Tablicy   - dla przemieszcze w pionie oraz  
 2 dla przemieszcze w poziomie. W przypadku przemieszczania po osi x musimy dodatkowo wylosowa kierunek ruchu kadej warstwy. Inaczej wszystkie patki
bd si poruszay tylko w jednym kierunku, co da bardzo nienaturalny efekt.
Ostatecznie do losowania uyjemy nastpujcego kodu:
%(" $&SUV
 &     %(3&%S
3  
    - X?2
%(" $&\UV
   &     %(3&%\

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
4C 3 (4 6(
4'D 3 %(4/

174

101 praktycznych skryptw na stronie WWW


-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
3  %(" $&S
+ 0 6
3  %(" $&\
+ 0 6
3  %(

3  %(3&%S

3  %(3&%\

3  & 6%5

F % +G
F 
  - & 6%5 PPG
F  &&G
 &&UI&I P V%6&&F
 &    
$6&T 2 
K
%(" $&SUV
 &     %(3&%S
3  
    - X?2
%(" $&\UV
   &     %(3&%\
K
K
F % G
F 
  - & 6%5 PPG
F  &&G
'
( % &&UI&I P V%6&&F
' P
%(" $&\UV
F ' / $6&T 2 J ZZ ' - G
%(" $&\UV
2%(" $&\UV
K
 &&UI&I P V%6&&F
'
6
( % &&UI&I P V%6&(
6 P
%(" $&SUV
F 6 /
$6&.*  2 NG
6

 &&UI&I P V%6&&F
 &   
 $6&T 2 
%(" $&SUV
 &     %(3&%S
3  
    - X?2
%(" $&\UV
   &    
%(3&%\
K
 &&UI&I P V%6&(
6
K
K
%"I% IW %(
K
 Q : C 3 ( 22/
-5!"/
-.01/
-HR1S  
I% +% I/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
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

Rozdzia 7. Animacje warstw

175

% P
I&F? 4/I
% P
I- A !5
4%+*F4/I
% P
I-1L/I
+%
K
 Q : C 3 ( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-." /

Skrypt 98. [E][O]


Realistycznie padajcy nieg.
Skrypt ten generuje najbardziej realistycznie padajcy nieg z dotychczas zaprezentowanych. Otrzymamy patki bardzo pynnie poruszajce si po ekranie i samodzielnie zmieniajce kierunek ruchu. Osigniemy to dziki skorzystaniu z funkcji sinus.
Zatem procedury realizujce ruch w pionie, tak jak we wszystkich poprzednich przykadach, pozostaj bez zmian. Kolejne fazy ruchu w poziomie bd wyliczane ze
wzoru:
+\
%$ P   %   (& P % \

gdzie  jest parametrem oznaczajcym przesunicie danego patka na sinusoidzie,


natomiast 
odpowiada za pynno ruchu. Dokadniej okrela, ile faz ruchu zmieci ma si w przedziale od 0 do . Warto  wyznacza rozcignicie sinusoidy w poziomie, czyli to, jak bardzo dany patek ma si odchyla w prawo i w lewo.
12 to pozycja pocztkowa danej warstwy.
Wzr ten po przeoeniu na kod powinien wyglda nastpujco:
 $HUV P
   % UV
'
( %  % $HUV  (&UV P (%\UV

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

101 praktycznych skryptw na stronie WWW

Skrypt 98
-." /
-.01/
- (2,3
452"6(4 
4' &  %
%277824/
-922 :6( ( ; ; :%<=: 4 ( :6;6 %:6(>+4 22/
-922 ?  % 2 &? %(%@ &% 22/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
3  %(" $&S
+ 0 6
3  (%\
+ 0 6
3  %
+ 0 6
3  (&
+ 0 6
3   $H
+ 0 6
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 : C 3 ( 22/
-5!"/
-.01/

Rozdzia 7. Animacje warstw

177

-HR1S  
I% +% I/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
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 : C 3 ( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-." /

Skrypt 99. [E][O]


Odbijajca si pika.
Skrypt ten pozwala uzyska efekt odbijajcej si od dolnej krawdzi okna przegldarki piki. Pika ta bdzie oczywicie obrazkiem umieszczonym na oddzielnej warstwie
(rysunek 7.11), ktr bdziemy odpowiednio przesuwa po ekranie.
Rysunek 7.11.
Pika bdzie odbija
si od dolnej krawdzi
okna przegldarki

Aby efekt wyglda realistycznie, musimy zasymulowa ruch jednostajnie przyspieszony, kiedy obiekt spada, oraz jednostajnie opniony, kiedy wznosi si po odbiciu. Nie

178

101 praktycznych skryptw na stronie WWW

bdziemy stosowa jednak adnych skomplikowanych wzorw fizycznych. Zamiast


tego bdziemy zwiksza (lub zmniejsza) ilo pikseli, o jak ma si przemieci
warstwa w kadej fazie ruchu. Za ten efekt odpowiada bdzie zmienna  1 .
Musimy take pamita, e po kadym kolejnym odbiciu pika nie moe osiga tej
wysokoci, od ktrej zaczyna si ruch. Inaczej odbijaaby si w nieskoczono od
obu brzegw ekranu. Kolejnym zadaniem jest wic regulacja wysokoci, na jak ma
wraca animowana warstwa. Dokonujemy tego, przypisujc odpowiedni warto
zmiennej  . Konkretny wzr wyglda tu nastpujco:
+ #+6%:^_
+6%:^_ P +6%:^_  

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
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
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

Rozdzia 7. Animacje warstw



%"I% IW %(

K
&% F 6 /
$ ]] 

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 : C 3 ( 22/
-5!"/
-.01/
-HR1S  
I% +% I/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
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 : C 3 ( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-." /

179

180

101 praktycznych skryptw na stronie WWW

Skrypt 100. [E][N6][O]


Pika poruszajca si po sinusoidzie.
Funkcj sinus zna ze szkoy chyba kady. Odpowiednie jej uycie pozwala na uzyskiwanie adnych wizualnie efektw graficznych. W prosty sposb moemy sprawi,
aby znana nam ze skryptu 99 pika poruszaa si w poziomie po torze sinusoidalnym.
Oczywicie nie musi by to pika. Zajmujemy si przecie animacj warstwy, a znajdujcy si na niej obrazek moe by dowolny.
Kolejne fazy ruchu generowa bdziemy na bieco, nie tablicujc wynikw. Za wyliczenia odpowiada bdzie nastpujcy fragment kodu:
; P
   % 
6
 &  %;  (& P (%"(

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
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
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  '


Rozdzia 7. Animacje warstw

181

%&&F
PP'
%&(
6
%"4% 4W %(
K
 Q : C 3 ( 22/
-5!"/
-.01/
-HR1S  
I% +% I/
-5!" 0AB0A
4C 3 (4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
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 : C 3 ( 22/
-5!"/
-. &*
44/"^_ %6-./
-HR1S/
-." /

Skrypt 101 [E][N][O]


Pywajce warstwy.
Umiemy ju porusza jedn warstw po sinusoidzie, moemy pokusi si zatem o stworzenie napisu, ktrego litery bd przemieszczay si w gr i w d, tworzc sinusoid?
Da to bardzo adny efekt wizualny, ktry osigniemy stosunkowo prostym sposobem.
Dla kadej litery zdefiniujemy oddzielna warstw, tak by mona byo nimi niezalenie porusza. Napis bdzie szecioliterowy, zdefiniujemy wiec sze warstw. Przy
czym, poniewa wikszo definicji bdzie taka sama, nie bdziemy ich powtarza,
lecz zrobimy to w sposb nastpujcy:
-"S/
Y+ %+ W Y+ %+ W Y+ %+ MW Y+ %+ NW Y+ %+ W Y+ %+ JG
3%$&6?3%$&
$ :*2&?
(%? $%&
+ ?
* ?
& 62$ :*2&?
K

182

101 praktycznych skryptw na stronie WWW

Zaoszczdzamy w ten sposb sporo miejsca. Litery bd si poruszay w pionie, musimy


wic wygenerowa kolejne pooenia. Moglibymy to robi przy kadym przebiegu
animacji, ale wygodniej bdzie zrobi to raz, a wyniki zapisa w tablicy. Nasze 6 liter
rozmieszczamy rwnomiernie na sinusoidzie w przedziale od 0 do 2. Wygenerujemy
dla kadej z nich sze pozycji, zatem kolejne pozycje bd od siebie odlege o 2 / 6,
czyli / 3. Obliczenie wykona za nas funkcja  w postaci:
F G
 $
+ 0 6
'

D

F
  - J PPG
 $UDPPV
 %'   P 
' P
   M
K
K

Teraz musimy zaj si animacj. W pierwszym ruchu warstwa 1. powinna przyj


pozycj zapisan w tablicy w miejscu o indeksie 0, w drugim ruchu o indeksie 1 itd.
Po dojciu do indeksu 6 wszystko powinno zacz si od nowa. Analogicznie warstwa
druga zaczyna od indeksu 1, warstwa 3 od indeksu 2 itd. Jednak rozpisanie tego w ten
sposb byoby bardzo niewygodne. Zdecydowanie lepszym pomysem jest przypisywanie kadej warstwie cay czas jednej komrki tablicy, tzn. warstwie 1. komrki 0, warstwie 2. komrki 1 itd. Natomiast w kadym ruchu przesuwa naley zawarto komrek samej tablicy. Dziki temu funkcja   bdzie miaa bardzo prosty kod:
F (;%G
'
 $UV
F 
  -  PPG
 $UV
 $U P V
K
 $UV
'
K

Funkcja ustawiania warstw wyglda bdzie natomiast nastpujco:


F % +T %+6G
F & 6%G
& 6%UI+ %+ IV(
 $UV
& 6%UI+ %+ IV(
 $UV
& 6%UI+ %+ MIV(
 $UV
& 6%UI+ %+ NIV(
 $UMV
& 6%UI+ %+ IV(
 $UNV
& 6%UI+ %+ JIV(
 $UV
K
&%G
*&H6I+ %+ I%6&(
 $UV
*&H6I+ %+ I%6&(
 $UV
*&H6I+ %+ MI%6&(
 $UV
*&H6I+ %+ NI%6&(
 $UMV
*&H6I+ %+ I%6&(
 $UNV
*&H6I+ %+ JI%6&(
 $UV
K
K

Rozdzia 7. Animacje warstw

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
4D 3 %(4 6(
4'D 3 %(4/
-922 B:6 (; (;*&< :   $%E*D<6 C 3 (
F G
 $
+ 0 6
'

D

F
  - J PPG
 $UDPPV
 %'   P 
' P
   M
K

184

101 praktycznych skryptw na stronie WWW


K
F % +T %+6G
F & 6%G
& 6%UI+ %+ IV(
 $UV
& 6%UI+ %+ IV(
 $UV
& 6%UI+ %+ MIV(
 $UV
& 6%UI+ %+ NIV(
 $UMV
& 6%UI+ %+ IV(
 $UNV
& 6%UI+ %+ JIV(
 $UV
K
&%G
*&H6I+ %+ I%6&(
 $UV
*&H6I+ %+ I%6&(
 $UV
*&H6I+ %+ MI%6&(
 $UV
*&H6I+ %+ NI%6&(
 $UMV
*&H6I+ %+ I%6&(
 $UNV
*&H6I+ %+ JI%6&(
 $UV
K
K
F (;%G
'
 $UV
F 
  -  PPG
 $UV
 $U P V
K
 $UV
'
K
F % G
%"4% 4W 
% +T %+6
(;%
K
 Q : C 3 ( 22/
-5!"/
-HR1S  
44/
-. &*
44/
-1L 
4+ %+ 4 %6&
4(? &F?4/

-1L/
-1L 
4+ %+ 4 %6&
4(? &F? 4/

-1L/
-1L 
4+ %+ M4 %6&
4(? &F?O 4/
M
-1L/
-1L 
4+ %+ N4 %6&
4(? &F?M 4/
N
-1L/
-1L 
4+ %+ 4 %6&
4(? &F?8 4/

-1L/
-1L 
4+ %+ J4 %6&
4(? &F?M 4/
J
-1L/
-0 .!)
4D 3 %(?% 4/ -0/
-./
-HR1S/
-." /

You might also like