Animation
DHTML Objekt fliegen lassen
Auf dieser Seite lernen wir ein Objekt zu animieren (Stück um Stück alle paar Millisekunden zu verschieben) als würde es springen oder fliegen.
Der Link:
<a href="#" onclick="fly();return false;">Let the Fly fly</a>
Das CSS:
<style type="text/css" media="screen">
#Objekt_1 {
background-image:url(images/bikinigirl.gif);
position:absolute;
top:440px;left:440px;
width:40px; height:57px;
background-color:transparent;
z-Index:500;
}
</style>
setTimeout('fly()',100);
<script type="text/javascript">
/*----------------------------------------------------------------------------*/
// globale Variablen
var x = 440; // Abstand nach oben
var y = 440; // Abstand nach links
var pxl = 40; // Sprungdistanz festlegen
// Funktion erwartet Himmelsrichtung aus dem Random Script
function move_it(richtung) {
var obj = document.getElementById("Objekt_1"); // Objekt holen
// Je nach Richtung Sprung berechnen
if (richtung == 'n'){ x -= pxl; }
if (richtung == 'no'){ x -= pxl; y += pxl; }
if (richtung == 'o'){ y += pxl; }
if (richtung == 'so'){ x += pxl; y += pxl; }
// if (richtung == 's'){ x += pxl; }
if (richtung == 'sw'){ x += pxl; y -= pxl; }
if (richtung == 'w'){ y -= pxl; }
if (richtung == 'nw'){ y -= pxl; x -= pxl; }
// Grenzen setzen, bei erreichen an Ausgangspunkt zurück
if(x == 0 || x == 1200){ x = 440; }
if(y == 0 || y == 1200){ y = 440; }
// alert('Abstand oben = '+ x +'\nAbstand links = '+ y); // Test
// Anweisung: an Objekt neue Koordinaten übergeben
obj.style.top = x+'px';
obj.style.left = y+'px';
} // ENDE Funktion move_it()
/*----------------------------------------------------------------------------*/
var Anz = 0;
var Max = 200; // Anzahl Sprünge bis Stop festlegen
function fly() {
if (Anz < Max) { // so lange bis Anzahl Sprünge ausgeführt wurden
kompass = new Array( 'n', 'no', 'o', 'so', 's', 'sw', 'w', 'nw');
// Erzeugt zufällige Ganzzahl 0 bis 15 für Array Index
randomly = (Math.round(Math.random() * 15));
// Aufruf Funktion move_it() mit Übergabe von Himmelsrichtung
// falls im Array eine Index-Zahl fehlt, gibt es eine Pause
move_it(kompass[randomly]);
setTimeout('fly()',100); // 100 Millisekunden warten, dann sich selbst wieder rufen
Anz += 1; // Zähler erhöhen
} else { // sonst wurde der erneute Aufruf übersprungen
Anz = 0; // Anzahl wird zurückgesetzt um die Funktion erneut über den Link starten zu können
}
} // ENDE Funktion fly()
/*----------------------------------------------------------------------------*/
</script>
Check den Code.