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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"><!-- var pos = 20; function startIt(anweisung) { if(anweisung == "start") { move = window.setInterval("moveIt()", 40); } else if(anweisung == "stop") { clearInterval(move); } } function moveIt() { pos = pos + 5; document.getElementById("block").style.left = (pos + "px"); } // --></script> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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:
1 2 |
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
Der “Stop” Buttom im Beispiel funktioniert unter Firefox nicht
Funktioniert der Stop Button nur in FF nicht oder allgemein bei dir nicht? Welche Version von FF brauchst du?
MFG
Admin
Also bei mir geht der Stop-Knopf auch net.
Habe folgende version
Mozilla/5.0 (Windows; U; Windows NT 6.1; de; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
Ich habe 6 Browsers auf meinem rechner und in keinem von denen funktioniert der STOP Button
Vielen Dank für die Rückmeldung. Ich habe das Script nun geändert, sodass es auch im Firefox funktioniert.
MFG
Der “Stop” Buttom im Beispiel funktioniert unter Firefox nicht
Ich habe das Script nun nochmal getestet und beides funktioniert bei mir mit FF 3.0.10. Welche Version hast du verwendet?
MFG