Weblap Hová jutunk?

Kocka 2 mozgási animáció 1956

Adott objektum ismétlődő mozgatása


A 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 class="animaciodiv"> </div> szakaszt, töröljük programunkból.








A html fájl megírása
<body>
<img src="peldakep.jpg" width="15px" height="15px" id="masodikkocka" class="kocka" />

<div class="animaciodiv"> </div>

<script language="JavaScript" type="text/javascript" src="elérési_útvonal.js"> </script>
</body>



A CSS fájl megírása
.animaciodiv { width: 270px; height: 170px; margin-left: 45px; border: 2px solid black;}
.kocka {position: absolute; margin-top: 5px; margin-left: 50px; }



JavaScript program megírása
var x=10;
var y=50;
var ido = 0;
var elteltido = 0;

// Az Update() függvény Meghívása. (Egy másodperces frissítés értéke = 1000)
// Az objektum, mozgási sebességét megváltoztathatjuk, ha a 10 értéket más értékre változtatjuk.


window.setTimeout ("Update(); " , 10) ;
var idelem = document.getElementById("masodikkocka") ;

function Update () {
elteltido++ ;
ido++ ;

idelem.style.marginTop=x+elteltido+'px';
idelem.style.marginLeft=y+ido+'px';

if (elteltido==100) elteltido=0;
if (ido==250) ido=0;

//A function programunkban is el kell helyezni, az időzítő funkciót.
window.setTimeout("Update(); " , 10) ;
}


 

 

 

 

 

 

Vissza a lap elejére