Objektumok egyenesvonalú mozgása 3414
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>
Vízszintes mozgás
Függőleges mozgás
Ferde mozgás, jobbra le és vissza, 45-fokban
Ferde mozgás, balra le és vissza, 45-fokban
CSS, azaz stílus fájl megírása
.terulet {width: 370px; height: 200px; border: 1px solid black; padding-left:5px;}
.kocka1, .kocka2, .kocka3 {width:15px; height:15px; margin-top:20px; margin-left:30px;}
.kocka4 {width:15px; height:15px; margin-top:20px; margin-left:250px;}
Vízszintes mozgás JavaScript programja
<div class="terulet">
<img src="kep15x15.jpg" width="15px" height="15px" id="kocka1" class="kocka1" />
<script language="JavaScript" type="text/javascript">
var x=0; // idelem függőleges érték
var y=0; // idelem vízszintes érték
var q=0; // számláló
var a=0;
var b=0;
var ido = window.setTimeout ("Vizszintes(); " , 5) ;
var idelem = document.getElementById("kocka1") ;
function Vizszintes () {
q++;
idelem.style.marginTop = x+20;
idelem.style.marginLeft = y+30;
if (q<201) {
a++;
y=+a;
bq=200; }
else if (bq>=200 && bq<=400) {
bq++;
b++;
y=200-b;
}
else {q=0; a=0; b=0; y=0;}
// Időzítő funkció, az ismétléshez
ido = window.setTimeout("Vizszintes(); " , 5) ;
}
</script>,
</div>
Függőleges mozgás JavaScript programja
<div class="terulet">
<img src="kep15x15.jpg" width="15px" height="15px" id="kocka2" class="kocka2" />
<script language="JavaScript" type="text/javascript">
var x1=0; // idelem függőleges érték
var y1=0; // idelem vízszintes érték
var q1=0; // számláló
var a1=0;
var b1=0;
var ido1 = window.setTimeout ("Fuggoleges(); " , 5) ;
var idelem1 = document.getElementById("kocka2") ;
function Fuggoleges () {
q1++;
idelem1.style.marginTop = x1+20;
idelem1.style.marginLeft = y1+30;
if (q1<101) { a1++; x1=+a1; bq1=200; }
else if (bq1>=200 && bq1<=300) { bq1++; b1++; x1=100-b1; }
else {q1=0; a1=0; b1=0; y1=0;}
// Időzítő funkció, az ismétléshez
ido1 = window.setTimeout("Fuggoleges(); " , 5) ;
}
</script>
</div>
Ferde mozgás, jobbra le és vissza, 45-fokban
<div class="terulet">
<img src="../javas_1001kepek/kep15x15.jpg" width="15px" height="15px" id="kocka3" class="kocka3" />
<script language="JavaScript" type="text/javascript">
var x2=0; // idelem függőleges érték
var y2=0; // idelem vízszintes érték
var q2=0; // számláló
var a2=0;
var b2=0;
var ido2 = window.setTimeout ("Ferde(); " , 5) ;
var idelem2 = document.getElementById("kocka3") ;
function Ferde () {
q2++;
idelem2.style.marginTop = x2+20;
idelem2.style.marginLeft = y2+30;
if (q2<101) { a2++; x2=+a2; y2=+a2; bq2=200; }
else if (bq2>=200 && bq2<=300) { bq2++; b2++; x2=100-b1; y2=100-b1;}
else {q2=0; a2=0; b2=0; y2=0;}
// Időzítő funkció, az ismétléshez
ido2 = window.setTimeout("Ferde(); " , 5) ;
}
</script>
</div>
Ferde mozgás, balra le és vissza, 45-fokban
<div class="terulet">
<img src="../javas_1001kepek/kep15x15.jpg" width="15px" height="15px" id="kocka4" class="kocka4" />
<script language="JavaScript" type="text/javascript">
var xx=0; // idelem függőleges érték
var yy=0; // idelem vízszintes érték
var qq=0; // számláló
var c=0;
var d=0;
var ido3 = window.setTimeout ("Ferdejobbra(); " , 5) ;
var idelem3 = document.getElementById("kocka4") ;
function Ferdejobbra () {
qq++;
idelem3.style.marginTop = xx+20;
idelem3.style.marginLeft = yy+250;
if (qq<101) { c++; xx=+c; yy=-c; v=200; }
else if (v>=200 && v<=300) { v++; d++; xx=100-d; yy=-(100-d);}
else {qq=0; c=0; d=0; yy=0;}
// Időzítő funkció, az ismétléshez
ido3 = window.setTimeout("Ferdejobbra(); " , 5) ;
}
</script>
</div>