|
|
Mozgási animáció
Mobilváltozat!
Asztali változathoz,
kattints a képre!
Ismétlődő mozgatása
Mozilla végett: Programunkat, natúr html fájlban készítjük el, DOCTYPE meghatározás nélkül
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
<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>
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 ;
idelem.style.marginLeft=y+ido;
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) ;
}