Div Container bewegen – Javascript Tutorial
Einigen wird es bereits augefallen sein, ich beschäftige mich im Moment ausgiebig mit Javascript. Die Möglichkeiten sind beinahe unbegrenzt und dur Javascript lässt sich vieles auf Websites für den Benutzer einfacher gestalten.
Ein vielleicht weinger nützliches aber trotzdem interessantes Beipiel ist dieses hier, ein Div-Container wird auf Knopfdruck per Javascript bewegt. Und wie das geht könnt ihr in diesem Tutorial lesen.
Voraussetzungen:
- Basis HTML Kenntnisse (Div Container, Buttons)
Lernziele:
- Div Container per Javascript bewegen
- Button Abfrage per Javascript
- Javascript Funktionen aufrufen
Und wie immer, schwer ist es eigentlich nicht, wenn man weiss wie. Wir haben einen Div-Container und zwei Buttons. Sobald auf auf den Start Button geklickt wird, bewegt sich der Div Container, haltet jedoch wieder an wenn man auf den Stop Button drückt.
Hier ein Beispiel des Scripts.
Erstelle ganz normal ein HTML Dokument und füge dann folgenden Code in den <head> Bereich ein:
Zuerst definieren wir die Variable “pos” welche die Startposition angibt. Diese kann jeden beliebigen Wert haben.
Dann kommt unsere erste Funktion mit dem Namen “startIt” zusätzlich wird noch der Parameter “anweisung” übergeben, denn mit dieser Funktion wollen wir die Bewegung nicht nur starten sondern auch stoppen. Hierzu haben wir auch die If-Anweisung, wenn der Parameter gleich “start” ist, wird das Interval gestartet:
Mit “move = window.setInterval(“moveIt()”, 40)” bewirken wir, dass eine Funktion regelmässig alle 40 Millisekunden aufgerufen wird. Dabei wird das Interval quasi in der Variable “move” gespeichert, damit wir es später dann wieder beenden können.
Danach kommt noch die Gegenteilige Anweisung, wenn der Parameter gleich “stop” ist, wird mit “clearInterval(move)” das aktuelle Interval gestoppt. Darum haben wir auch die Variable “move” denn in ihr wird quasi die ID des Intervals gespeichert.
Nun kommen wir zu der zweiten Funktion die wir “moveIt” sie bewirkt, dass sich unser Div-Container bewegt. In der Variable “pos” wird ja die Startposition gespeichert alles was wir tun müssen, ist diese schrittweise erhöhen und und dann dem Div Container sagen, dass er die Position wechseln soll.
Dies geht mit: ”document.getElementById(“block”).style.left = (pos + “px”)” dem Div Container “block” (kann übrigens auch ein Bild oder sonst ein HTML Objekt sein) wird per Javascript eine neue Position zugewiesen. Schlussendlich müssen wir noch ein “px” anhängen, da in CSS nur der reine Zahlenwert nicht reicht.
Das wär’s auch schon was Javascript angeht. Nun brauchen wir noch etwas CSS:
body {
font-family: "Century Gothic";
background-color: #6A6A6A;
}
#block {
background-color: #99CC33;
width: 43px;
border: 1px solid #009933;
color: #006633;
top: 20px;
left: 20px;
padding: 5px;
position: absolute;
}
Dies braucht eigentlich keine grosse Erklärung. Wichtig ist nur das “position: absolute;” denn ohne das funktioniert das Script nicht oder nur eingeschränkt.
Nun zum Schluss noch den HTML Code:
Auch das ist eigentlich ganz simpel, wir haben den Div Container mit der ID “block” und zwei Buttons. Wichtig dabei ist, dass beim Klick die Funktion “startIt(’start’)” oder analog dazu “startIt(’stop’)” aufgerufen wird.
Probiert euer Script nun aus und spielt ein bisschen damit rum, zum Beispiel probiert den Div-Container von oben nach unten bewegen zu lassen oder probiert das ganze mit einem Bild aus.
UPDATE: Vielen Dank für den Hinweis mit Firefox, ich habe das Script nun so geändert, dass es auch im FF funktioniert.
MFG
Michael Ziörjen
There are 10 comments in this article: