Félköríves mozgás. 3515
Haladási irány: 6-7-8-9-10-11- íven 12 óráig
Mozillában csak akkor működik, ha kiiktatjuk a DOCTYPE meghatározást:
<-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
Azon szakaszt, területet, melyben a kockakép mozog, utólagosan állítjuk be arra a méretre, melyet, a mozgó objektum bejár.
Ha, nem helyezünk el <p> </p> üres bekezdéseket, vagy megfelelő méretű div szakaszt, akkor a mozgó objektum, a dokumentumunk szövegterületén mozog.
Teszteljük le úgy is, hogy a <p> </p> üres bekezdéseket, töröljük programunkból.
XHTML fájl
<img src="peldakep19/kep15x15.jpg" width="15px" height="15px" id="kocka1" class="kocka1" />
<script language="JavaScript" type="text/javascript" src="js_fájl_elérési_útvonala.js"> </script>
<p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p>
JavaScript fájl
var x=0; // idelem függőleges érték (idelem = változó név, helyette tetszőleges elnevezés írható)
var y=0; // idelem vízszintes érték
var q=0; // Első feltétel (if) számlálója
var qq=0 // Második feltétel (else if) számlálója
var r=100; // Azon kör sugara, melynek ívén, a kocka mozog
var a=0; // Háromszög "a" oldalának hossza, az első feltételnél
var a2=0; // Háromszög "a" oldalának hossza, a második feltételnél
var b=0; // Háromszög "b" oldalának hossza, az első feltételnél
var b2=0; // Háromszög "b" oldalának hossza, a második feltételnél
var ido = window.setTimeout ("Update(); " , 30); // Időzítő funkció előkészítése, és egy tetszőleges változóhoz rendelése
var idelem = document.getElementById("kocka1"); // idelem változóhoz rendeljük azon jelölőelemet, melynek id azonosítója = kocka1
function Update () {
q++;
idelem.style.marginTop = x+100; //A mozgatandó objektum pozíciója, (Monitor vagy div szakasz felső szélétől, lefelé való távolság )
idelem.style.marginLeft = y+200; //A mozgatandó objektum pozíciója, (Monitor vagy div szakasz bal szélétől, jobbra való távolság )
if (q < 100) { //Első feltétel, mely 99-szer teljesűl
a++;
b= Math.sqrt((r*r)-(a*a)); // kiszámoljuk a háromszög "b" oldalának hosszát
y= y-1; x=b;
qq=100; // Második feltétel (else if) számlálójának, kezdeti érték beállítása
}
else if (qq >= 100 && qq <= 199) { //Második feltétel, szintén 99-szer teljesűl
qq++;
a2++;
b2= Math.sqrt((r*r)-(a2*a2)); //Második feltételnél is, kiszámoljuk a háromszög "b" oldalának hosszát
x=x-1; y=-b2;
}
else {q=0; a=0; a2=0; x=0; y=0;} //Ha "q" és "qq" értéke egyik feltételben sem teljesül, akkor mindent lenullázunk
//Időzítő funkció, a program újboli lefuttatásához.(frissítés)
ido = window.setTimeout("Update(); " , 30);
}