Wie man ein HTML Element bewegt

Saturday, 15. April, 2006

Dieser Artikel beschreibt die Prinzipien hinter einer JavaScript Animation.

Wenn wir in diesem Zusammenhang von einer “Animation” sprechen, meinen wir eigentlich “das Verändern der Position von etwas”. Es gibt andere Formen der Animation, wo das Objekt seine Position nicht verändert, sondern das, was auf dieser Position gezeigt wird, verändert sich. Ein Beispiel dafür ist ein animiertes GIF Image. Aber für den Zweck dieses Tutorials bedeutet “Animation”, etwas mit Hilfe von JavaScript so ausschauen zu lassen, als ob sich etwas bewegen würde.

Die Verwendung eines Handles

Um ein HTML Element mittels JavaScript zu referenzieren, verwenden wir sein Objekt Handle. Eine praktische Art, das zu machen, ist die Verwendung der document.getElementById() Funktion.

Sagen wir, wir haben ein Image Element auf unserer Seite, welches wir bearbeiten wollen. Beachte, dass wir ein id-Attribut beim img Element spezifiziert haben.

<img id="demoimage" src="demo.gif" alt="" />

In JavaScript können wir auf diese Weise zum Objekt gelangen:

demoObj=document.getElementById('demoimage');

Nun können wir alle Eigenschaften, wie src und style bearbeiten.

Die Manipulierung der Objekt Position

Um eine neue Position für das Image festzusetzen, machen wir dies:

demoObj.style.left='100px';
demoObj.style.top='50px';

Und das ist auch schon alles! Wir beschreiben in einem anderen Artikel, wie die BunteSuppe Steinchen animiert werden.

Beispiel Seite

Schau Dir diese HTML Seite an, die ein Beispiel zeigt, wie man die Position eines Objekts mittels Javascript setzen kann.

Klick auf “Bewege es” und das div wird seine Position ein kleines bisschen verändern.