DIV-Layer zeitgesteuert einzublenden, kann ein netter Effekt sein. Das wird mit einem kleine JavaScript erledigt. Dieses kann man im Header direkt oder in einer externen Datei einbinden.
function roll(box,time,stop) {
var x = document.getElementById(box).style.top;
y = parseInt(x.replace(/px/g ,”"));
if(y < stop) {
y = y+2;
document.getElementById(box).style.top = y+’px’;
setTimeout(“roll()”, time);
}
}
Im Body muss dieses Script dann noch aufgerufen werden.
<body onLoad=”setTimeout(“roll(‘layer’,100,300)”, 100);”>
Mit “setTimeout()” wird eine Funktion aufgerufen, die nach einer bestimmten Zeit (hier: 100 Millisekunden) eine weitere Funktion aufruft (hier: roll).
Der Funktion roll() werden drei Parameter übergeben:
- Name des zu rollenden Layers
- Zeit in Millisekunden, in der das Script sich selber immer wieder aufruft.
- Zielposition, an der das Script stoppen soll.
Tags: div rollen, HTML, JavaScript
