Kocka 3 animáció 1957
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.
XHTML fájl leírása.
<head>
<title> Kocka animáció</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="Stílus.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Kocka animáció.</h1>
<!-- A kocka nevű képet, előre el kell készíteni 15px x 15px méretben. -->
<img src="kocka.jpg" width="15px" height="15px" id="kocka3" class="kocka" />
<div class="animaciodiv"> </div>
<script language="JavaScript" type="text/javascript" src="animate.js"></script>
</body>
Stílusok leírása.
.animaciodiv { width: 270px; height: 170px; margin-left: 45px; border: 2px solid black;}
.kocka {position: absolute; margin-top: 5px; margin-left: 50px; }
JavaScript, animate.js program leírása.
var x=10; y=50;
var a = 0; b = 0;
var tovabb;
// Update() függvény meghívása 0.5 másodperces időzítéssel, akkor a 10 helyett, ezt kell beírni: 500
window.setTimeout ("Update(); " , 10) ;
var idelem = document.getElementById("kocka3") ;
function Update () {
idelem.style.marginTop=x+a+'px';
idelem.style.marginLeft=y+b+'px';
if (a<145) a++;
else {a=145; b++;}
if (b<250) tovabb;
else b=250 ;
if ((a==145),(b==250)) {a=0; b=0;}
// Update() függvény meghívása, időzítővel.
window.setTimeout("Update(); " , 10) ;
}