Kocka 1 animáció 1905
Az animáció, hogy hól jelenik meg a monitoron, attól függ, hogy mekkora a számítógép monitor mérete
Oka: Hogy határoztuk meg a pozíciót.
Ha így:
A top érték, a monitor felső széle
A left érték, a monitor bal széle
Ha így:
A stíluslapon margin-top JavaScriptben marginTop értéke, a div szakaszhoz igazodik
A stíluslapon margin-left JavaScriptben marginLeft értéke a div szakaszhoz igazodik
Amíg az adott objektumra vonatkozó stílust, előzetesen meg nem határozzuk, addig a jávascript nem módosítja a programunk objektum pozícióját.
A html fájl megírása
<div id="animacio1" >
<h5 id="animacioh5"> </h5>
<img src="kockakep.jpg" width="15" height="15" id="kockakep" />
</div>
A stílus meghatározás:
#animacio1{margin-left: 10px; margin-top: 80px; width: 780px; height: 260px; border: 1px solid black; text-align: center;}
#kockakep {position: absolute; margin-top: 100px; margin-left: 250px;}
JavaScript program
<script language="JavaScript" type="text/javascript">
var idelem= document.getElementById("kockakep") ;
{
window.setTimeout ('idelem.style.left="250px"; idelem.style.top="100px" ' , 1500);
window.setTimeout ('idelem.style.left="300px"; idelem.style.top="100px" ' , 2000);
window.setTimeout ('idelem.style.left="350px"; idelem.style.top="100px" ' , 2500);
window.setTimeout ('idelem.style.left="400px"; idelem.style.top="100px" ' , 3000);
window.setTimeout ('idelem.style.left="450px"; idelem.style.top="100px" ' , 3500);
window.setTimeout ('idelem.style.left="500px"; idelem.style.top="100px" ' , 4000);
window.setTimeout ("idelem.style.left='500px'; idelem.style.top='125px' " , 4500);
window.setTimeout ("idelem.style.left='500px'; idelem.style.top='150px' " , 5000);
window.setTimeout ("idelem.style.left='500px'; idelem.style.top='175px' " , 5500);
window.setTimeout ("idelem.style.left='500px'; idelem.style.top='200px' " , 6000);
window.setTimeout ("idelem.style.left='500px'; idelem.style.top='225px' " , 6500);
window.setTimeout ("idelem.style.left='500px'; idelem.style.top='250px'" , 7000);
window.setTimeout ("idelem.style.left='450px'; idelem.style.top='250px' " , 7500);
window.setTimeout ("idelem.style.left='400px'; idelem.style.top='250px' " , 8000);
window.setTimeout ("idelem.style.left='350px'; idelem.style.top='250px' " , 8500);
window.setTimeout ("idelem.style.left='300px'; idelem.style.top='250px' " , 9000);
window.setTimeout ("idelem.style.left='250px'; idelem.style.top='250px' " , 9500);
window.setTimeout ("idelem.style.left='250px'; idelem.style.top='225px' " , 10000);
window.setTimeout ("idelem.style.left='250px'; idelem.style.top='200px' " , 10500);
window.setTimeout ("idelem.style.left='250px'; idelem.style.top='175px' " , 11000);
window.setTimeout ("idelem.style.left='250px'; idelem.style.top='150px' " , 11500);
window.setTimeout ("idelem.style.left='250px'; idelem.style.top='125px' " , 12000);
window.setTimeout ("idelem.style.left='250px'; idelem.style.top='100px' " , 12500);
}
var idelem2= document.getElementById("animacioh5") ;
window.setTimeout ("idelem2.innerHTML = ('Letelt az idő, bemutatónak V É G E ! ') " , 13000);
</script>