02_XScript/04_JavaScriptN_a.htm
1 <html>
2 <head>
3 <title>Pohyb - JavaScript</title>
4
5 <script type="text/javascript">
6
7 var Tik = 10; // pocet milisekund simulacneho kroku
8
9 // Trieda CPohyb obsluhuje pohybujuci objekt
10 function CPohyb(Obj, y, xOd, xDo, Interval, Krok)
11 {
12 this.Obj = Obj; // obsluhovany objekt
13 this.xOd = this.x = xOd; // lava medza
14 this.xDo = xDo; // prava medza
15 this.Interval = Interval; // interval medzi dvoma krokmi
16 this.Krok = Krok; // krok - zmena polohy na osi x
17 this.Cas = 0; // pocitadlo casu
18 this.Smer = 1; // smer pohybu: 1=vpravo, -1=vlavo
19
20 // Nastavenie vychodzej polohy objektu
21 this.Obj.style.position="absolute";
22 this.Obj.style.top=y+"px";
23 this.Obj.style.left=xOd+"px";
24
25 // Clenska metoda - posun objektu
26 this.Posun = Posun;
27 function Posun ()
28 {
29 this.Cas+=Tik;
30 if (this.Cas>=this.Interval)
31 { // Uplynul cas vacsi alebo rovny ako je pozadovany interval
32 this.Cas=0;
33 this.x+=this.Smer*this.Krok;
34 this.Obj.style.left=this.x+"px";
35 // Urcenie smeru pri nasledujucom kroku
36 if (this.x<this.xOd || this.x>this.xDo) this.Smer*=-1;
37 }
38 }
39 }
40 // Pole pre posuvane objekty
41 var PObjekty = new Array();
42 var Stop = false;
43
44 function Casovac()
45 {
46 if (Stop==true) return;
47 for (i=0; i< PObjekty.length; i++)
48 {
49 PObjekty[i].Posun();
50 }
51 }
52 function Obj (id)
53 { // Získanie objektu prvku so zadanou hodnotou atribútu id
54 if (document.getElementById) return document.getElementById(id); // W3C DOM
55 if (document.all) return document.all[id]; // staršie IE
56 return null;
57 }
58
59 function Start ()
60 { // Obj y xOd xDo Cas Krok
61 PObjekty.push (new CPohyb(Obj("Nadpis"), 30, 10, 300, 10, 2));
62 PObjekty.push (new CPohyb(Obj("Text"), 70, 0, 400, 20, 3));
63 PObjekty.push (new CPohyb(Obj("Obrazok"), 90, 50, 500, 10, 1));
64 window.setInterval('Casovac()', Tik);
65 }
66 </script>
67 </head>
68 <body onload="Start()" onclick="Stop=!Stop">
69 <div style="height:130px;">
70 <h2 id="Nadpis" >Kuk :-)</h2>
71 <div id="Text" >Aj text sa môže hýbat...</div>
72 <img id="Obrazok" src="Tarantula.jpg" />
73 </div>
74 xxxxxxx
75 </body>
76 </html>