Egyenesvonalú mozgás, hatszög kerületén 3415
Adott objektum ismétlődő mozgatása
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 div szakaszt, melyben a kockakép mozog, utólagosan állítjuk be arra a méretre, melyet az adott mozgó objektum bejár.
Ha nem készítünk div szakaszt, akkor a mozgó objektum, a dokumentumunk szövegterületén mozog.
Teszteljük le úgy is, hogy a <div> szakaszokat, töröljük programunkból.
XHTML fájl
<img src="kep15x15.jpg" width="15px" height="15px" id="kocka1" class="kocka13415" />
<img src="kep15x15.jpg" width="15px" height="15px" id="kocka2" class="kocka23415" />
<img src="kep15x15.jpg" width="15px" height="15px" id="kocka3" class="kocka33415" />
<img src="kep15x15.jpg" width="15px" height="15px" id="kocka4" class="kocka43415" />
<div class="hatszog_001"> </div>
<div class="hatszog_002"> </div>
<div class="hatszog_003"> </div>
<script language="JavaScript" type="text/javascript" src="pelda3505js.js"> </script>
CSS fájl
.hatszog_001 {width: 275px; height: 90px; margin-left: 170px; border: 1px solid black; }
.hatszog_002 {width: 275px; height: 90px; margin-left: 170px; border: 1px solid black; }
.hatszog_003 {width: 275px; height: 90px; margin-left: 170px; border: 1px solid black; }
.kocka1 {position: absolute; margin-top: 5px; margin-left: 50px; }
.kocka2 {position: absolute; margin-top: 150px; margin-left: 50px; }
.kocka3 {position: absolute; margin-top: 167px; margin-left: 175px; }
.kocka4 {position: absolute; margin-top: 85px; margin-left: 425px; }
JavaScript fájl
var x=5; // idelem függőleges érték
var y=250; // idelem vízszintes érték
var a=250; // elem2 függőleges érték
var b=350; // elem2 vízszintes érték
var c=175; // elem3 függőleges érték
var d=175; // elem3 vízszintes érték
var e=85; // elem4 függőleges érték
var f=425; // elem4 vízszintes érték
var q=1; //Feltételek teljesülésének, számlálója
// az Update() függvény Meghívása 0.5 (Egy másodperces időzítés = 1000)
var ido = window.setTimeout ("Update(); " , 0.1) ;
var idelem = document.getElementById("kocka1") ;
var elem2 = document.getElementById("kocka2") ;
var elem3 = document.getElementById("kocka3") ;
var elem4 = document.getElementById("kocka4") ;
function Update () {
q++;
idelem.style.marginTop = x ;
idelem.style.marginLeft = y ;
elem2.style.marginTop = a ;
elem2.style.marginLeft = b ;
elem3.style.marginTop = c ;
elem3.style.marginLeft = d ;
elem4.style.marginTop = e ;
elem4.style.marginLeft = f ;
if ( q < 100 ) { y= y+1; b=b-1; c= c-1; e= e+1;} //100
else if ( q >= 100 && q <= 174 ) {x= x+1; y=y+1; a= a-1; b=b-1; c= c-1; d=d+1; e= e+1; f=f-1;}
else if ( q >= 175 && q <= 274 ) {x= x+1; a= a-1; d= d+1; f= f-1;}
else if ( q >= 275 && q <= 349 ) {x= x+1; y=y-1; a= a-1; b=b+1; c= c+1; d=d+1; e= e-1; f=f-1;}
else if ( q >= 350 && q <= 449 ) {y= y-1; b= b+1; c= c+1; e= e-1;}
else if ( q >= 450 && q <= 524 ) {x= x-1; y=y-1; a= a+1; b=b+1; c= c+1; d=d-1; e= e-1; f=f+1;}
else if ( q >= 525 && q <= 624 ) {x= x-1; a= a+1; d= d-1; f= f+1;}
else if ( q >= 625 && q <= 700 ) {x= x-1; y=y+1; a= a+1; b=b-1; c= c-1; d=d-1; e= e+1; f=f+1;}
else {q=0; x=5; y=250; a=250; b=350; c=175; d=175; e=85; f=425; }
//Az időzítő funkció (ismétlési idő)
ido = window.setTimeout("Update(); " , 0.1) ;
}