Haladási irány: Balra forgás

Ha olyan értékeket határozunk meg, melynek hatására, a kör méretei kívül esnének az 500x500px méretű területen, akkor figyelmeztető szöveg jelenik meg.

A négyzetrács alján és jobb oldalán látható, zöld színnel jelölt területnek, meg kell egyezni a kép, azaz mozgatandó objektum méretével.
- Lent, a kép, azaz mozgatandó objektum magasságával
- Jobb oldalt, a kép, azaz mozgatandó objektum szélességével
Oka: A kép, azaz mozgatandó objektum, bal felső sarka halad a köríven, és ehhez igazodik a kép, azaz mozgatandó objektum további területe.

JS fájlban megváltoztathatjuk:
A kör sugarát (r) 10 és 250px között
Kör központját:
TOP azaz x-et k1-nek adott értékkel, 10 és 250px között.
LEFT azaz y-t k2-nek adott értékkel, 10px és 400px között.

Megjegyzés
A sárga háttérszínnel jelőlt részek, Törölhetők a programból. Ezek nem részei az animációnak. Az aktuális x és y értékek kiíratására szolgálnak.

XHTML fájl animációs része
<div class="animacio3521">
<img src="peldakep19/kep15x15.jpg" width="15px" height="15px" id="kocka1" class="kocka1" />
<script language="JavaScript" type="text/javascript" src="pelda3521js.js"> </script>
</div>

CSS fájl, stílusok meghatározása:
.animacio3521 { width: 515px; height: 515px; border: 1px solid black;}
.kocka1 {position: absolute; margin-top: 5px; margin-left: 50px; }

JavaScript programunk
// Kor átmérő változtatása,

var r=250; // Sugár mérete px-ben Tetszőleges érték lehet 10-250 között
var k1=250; k2=250; // k1 és k2 Kör központja x és y koordinátán
var sz1=0; sz2=0; sz3=0; sz4=0; //Animációs feltételek (if) számlálói. Egy adott feltétel, mettől-meddig teljesüljön.
var x=0; // idelem, azaz mozgatandó objektum pozíciója. Függőleges érték
var y=0; // idelem, azaz mozgatandó objektum pozíciója. Vízszintes érték
var a1=0; a2=0; a3=0; a4=0; // Hól az x, hól az y koordináta vonalán megteendő px-eket határozzák meg. Minden lefutás után, egyel, növekedik értékük.
var gyok=0; // A képlet [(r*r)-(a*a)] négyzetgyöke
var b=0; // A négyzetgyök eredményét egész számra kerekíti

var ido2 = window.setTimeout ("Update2(); " , 10) ; // ismétlődési változó(ido2) beállítása
var idelem = document.getElementById("kocka1") ; // Mozgatandó objektum megkeresése, ésváltozóhoz rendelése. Jelen esetben: idelem, de tetszőleges elnevezés alkalmazható

var pozicio1 = document.getElementById("pos1") ;
var pozicio2 = document.getElementById("pos2") ;
var pozicio3 = document.getElementById("pos3") ;
var pozicio4 = document.getElementById("pos4") ;

// Program animációs fukciója következik
function Update2 () {

//Kezdeti értékeket ellenőrző feltételek. Ha ezen feltételek nem teljesülnek, akkor figyelmeztető ablak jelenik meg
var t1=k1+1; t2=k2+1; // k1 és k2 értékét megnöveljük 1-el. Ha x vagy y = r; az eredmény így nem lehet "0"
if (t1-r<=0) {alert(" A kör X pozíciója, nem lehet ----- kisebb -------, a sugárnak ( r ) adott értéknél !"); return; };
if (t1+r>=502) {alert(" A kör X pozíciója, nem lehet ----- nagyobb -------, a sugárnak ( r ) adott értéknél !"); return; };
if (t2-r<=0) {alert(" A kör Y pozíciója, nem lehet ----- kisebb -------, a sugárnak ( r ) adott értéknél !"); return; };
if (t2+r>=502) {alert(" A kör Y pozíciója, nem lehet ----- nagyobb -------, a sugárnak ( r ) adott értéknél !"); return; };
if (r<10 || r>250) {alert("A kör -------- sugarának 10 és 250 --------- között kell lenni !"); return;} ;
if (k1<10 || k1>250) {alert("A kör központjának függőlegesen, TOP x= 10 és 250 között kell lenni !"); return;} ;
if (k2<10 || k2>500) {alert("A kör központjának vízszintesen LEFT y= 10 és 400 között kell lenni !"); return;} ;

sz1++;

idelem.style.marginLeft = y; //Objektum pozíciója y koordinátán
idelem.style.marginTop = x; //Objektum pozíciója x koordinátán

// Első negyed, azaz első animációs feltétel: 9-6 óra között
if (sz1< r+1) {
function uzenettorles ( ) {
pozicio1 = document. getElementById ("pos1");
pozicio1.innerHTML = " ";
}
a1++; gyok= Math.sqrt((r*r)-(a1*a1)); b=parseInt(gyok);
x=k1+a1; y=k2-b;

pozicio1 = document.getElementById ("pos1");
pozicio1.innerHTML =("<u>Első negyed:</u> x = "+ x +" Első y = "+ y);

sz2=1;
}

// Második negyed, azaz második animációs feltétel: 6-3 óra között
else if (sz2>=1 && sz2<=r) { sz2++;
function uzenettorles ( ) {
pozicio2 = document. getElementById ("pos2");
pozicio2.innerHTML = " ";
}
a2++; gyok= Math.sqrt((r*r)-(a2*a2)); b=parseInt(gyok);
x=k1+b; y=k2+a2;

pozicio2 = document.getElementById ("pos2");
pozicio2.innerHTML =("<u&t;Második negyed:</u> x = "+ x +" Második y = "+ y);

sz3=1;
}

//Harmadik negyed, azaz harmadik animációs feltétel: 3-12 óra között
else if (sz3>=1 && sz3<=r) { sz3++;
function uzenettorles ( ) {
pozicio3 = document. getElementById ("pos3");
pozicio3.innerHTML = " ";
}
a3++; gyok= Math.sqrt((r*r)-(a3*a3)); b=parseInt(gyok);
x=k1-a3; y=k2-(-b*1);

pozicio3 = document.getElementById ("pos3");
pozicio3.innerHTML =("<u>Harmadik negyed:</u> x = "+ x +" Harmadik y = "+ y);

sz4=1;
}

//Negyedik negyed, azaz negyedik animációs feltétel: 12-9 óra között
else if (sz4>=1 && sz4<=r) {sz4++;
function uzenettorles ( ) {
pozicio4 = document. getElementById ("pos4");
pozicio4.innerHTML = " ";
}
a4++; gyok= Math.sqrt((r*r)-(a4*a4)); b=parseInt(gyok);
x=k1+(-b*1); y=y-1;

pozicio4 = document.getElementById ("pos4");
pozicio4.innerHTML =("<u>Negyedik negyed:</u> x = "+ x +" Negyedik y = "+ y);
}

// Ha egyik animációs feltétel sem teljesül
else {sz1=0; sz2=0; sz3=0; sz4=0; a1=0; a2=0; a3=0; a4=0; x=k1; y=k2-r;};
// y=k-r Kezdetben y=központ-b. Ekkor b értéke=r. De az utólsó feltétel végén "b" nem egyezik meg "r" értékével, így nem lehet y=k-b értékkel

//A function programunk újboli lefutásának időzítője
ido2 = window.setTimeout("Update2(); " , 10) ;
}

 

---

Az általánosan elfogadott 800px méretű monitorokat figyelembe véve.

Meg kell határozni,a kör kezdeti pozícióját, k1-nek és k2-nek.
Legnagyobb kör sugara= 250
Legnagyobb kör, 500x500 px területen fér el, ha nem akarjuk, hogy alul kimenjen a monitor látható területéről
Legnagyobb kör optimális központja: x=250px; y=250px; értéknél nagyobb nem lehet
Legkisebb kör sugara= 10px;
legkisebb kör 20x20 px területen fér el
legkisebb kör optimális központja: x=10px; y=10px; értéknél kisebb nem lehet
Elfogadható érték: x=r; y=r;
A kör legoptimálisabb központja: x=250px; y=250px;
Mindkét esetben, figyelembe kell venni, a mozgatandó objektum méreteit is

 

 

 

 

 

 

Vissza a lap elejére