Geschrieben von Melanie Petersen.

Kleine Skript-Sammlung für Webdesigner - Divcontainer einfliegen lassen

Seite 4 von 6: Divcontainer einfliegen lassen

Seite 4 von 6

Divcontainer einfliegen lassen

In diesem kleinen Artikel findet sich der Quellcode inklusive der Anleitung um einen Divcontainer "einfliegen" zu lassen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#box{
 position: absolute;
 left: 0;
 top:0;
 width: 100px;
 height: 100px;
 position: absolute;
 border: 1px solid #000;
 background-color: #ccc;
}
</style>
<script>
var delay = 5;
var movepx = 2;
function init(_object,startx,starty,endx,endy){
 var o = document.getElementById(_object);
 o.style.left = startx + 'px'; 
 o.style.top = starty + 'px'; 
 fly(_object,endx,endy);
}

function fly(_object,xpos,ypos){
 var o = document.getElementById(_object);
 var posx = parseInt(o.style.left);
 var posy = parseInt(o.style.top);

o.style.left = (posx<xpos) ? posx + movepx + 'px' : xpos + 'px';
 o.style.top = (posy<ypos) ? posy + movepx + 'px' : ypos + 'px';
 if(posx != xpos || posy != ypos){
 setTimeout('fly('' + _object + '',' + xpos + ',' + ypos + ')', + delay);
 }
}
</script>
</head>
<body onload="init('box',0,100,300,100)">
<div id="box">
Inhalt
</div>
</body>
</html>