Het script:
[JS]<script type="text/javascript">
function plaats_obj(){
/* deze eerste twee regels kijken of de browser het standaard DOM ondersteund en of het object aanwezig is */
if(!document.getElementById) return false;
if(!document.getElementById("object")) return false;
/* selecteer het object */
var obj = document.getElementById("object");
/* en zet de style van het object: absolute positie en de coordinaten */
obj.style.position = "absolute";
obj.style.left = 0;
obj.style.top = 0;
/* enkele instellingen */
grens_rechts = 900;
grens_links = 0;
snelheid = 2;
}
function beweeg_obj()
{
if(!document.getElementById) return false;
if(!document.getElementById("object")) return false;
var obj = document.getElementById("object");
/* verkrijg de huidige x positie van het object */
var x = parseInt(obj.style.left);
/* als de grenzen overschreden worden, keer de richting van de animatie om */
if(x >= grens_rechts || x < grens_links)
{
snelheid = snelheid * -1;
}
/* vergroot / verklein de x positie van het object */
x = x + snelheid;
/* zet de positie op die locatie op de pagina, door het zetten van de style */
obj.style.left = x + "px";
/* deze functie roept na 10 miliseconden weer dezelfde functie aan */
beweging = setTimeout("beweeg_obj()", 10);
}
/* deze functie zorgt ervoor dat je 2 of meerdere functie bij window.onload kunt uitvoeren */
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function' ){
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
addLoadEvent(plaats_obj);
addLoadEvent(beweeg_obj);
</script>[/JS]
en dit in de <body>:
HTML:
<body>
<p id="object">Dit is het bewegende object</p>
</body>
