Ergebnis 1 bis 2 von 2
  1. #1
    loginator ist offline Grünschnabel
    registriert
    20-03-2012
    Beiträge
    2

    Div mithilfe von Javascript bewegen!

    Hey, ich hoffe ihr könnt mir helfen!
    Ich möchte ein Div mithilfe von Javascript auf Knopfdruck bewegen!
    Hier mal mein Ansatz!
    Code:
    <html>
    <head>
    <title>Bewegtes DIV</title>
    <script type="text/javascript">
    function move()
    {
    	for(var movePX=0; movePX<=50; movePX++)
    	{
    		document.getElementById("viereck").style.left = movePX+"px";
    	}
    }
    </script>
    </head>
    <body>
    <div id="viereck" style="width:50px; height:50px; background-color:#000; position:absolute; z-index:1; top:0px; left:0px"></div><br /><br /><br /><br /><br /><br /><br /><br />
    <input type="button" value="Move Left" onclick="move()" />
    </body>
    </html>
    Das Div mit der id viereck bewegt sich zwar allerdings in einem Schritt um 50 Pixel!
    Ich möchte das die Bewegung flüssig und sichtbar abläuft, also ein Pixel nach dem anderen.
    Schon mal danke im Vorraus.

  2. #2
    loginator ist offline Grünschnabel
    registriert
    20-03-2012
    Beiträge
    2

    AW: Div mithilfe von Javascript bewegen!

    Ok ich habe es gerade selber herausgefunden!
    Hier die Lösung:
    Code:
    <html>
    <head>
    <title>Bewegtes DIV</title>
    <script type="text/javascript">
    var pos=0;
    var intervalLeft;
    function moveLeft()
    {
    	document.getElementById("viereck").style.left = pos+"px";
    	pos++;
    	if(pos==50)
    	{
    		clearInterval(intervalLeft);
    	}
    }
    
    function setIntervalLeft()
    {	
    	intervalLeft = setInterval(moveLeft,10);
    }
    </script>
    </head>
    <body>
    <div id="viereck" style="width:50px; height:50px; background-color:#000; position:absolute; z-index:1; top:0px; left:0px"></div><br /><br /><br /><br /><br /><br /><br /><br />
    <input type="button" value="Nach links Bewegen" onclick="setIntervalLeft()" />
    </body>
    </html>
    PS. Sry das ist keine bewegung nach links ^^ sondern nach rechta
    Geändert von loginator (20-03-2012 um 22:05 Uhr)

Ähnliche Themen

  1. Kann man ein Bild mithilfe von Javascript speichern?
    Von sheepy007 im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 14-03-2008, 11:46
  2. iframes mithilfe von javascripts anzeigen
    Von pyro991 im Forum Allgemeines
    Antworten: 3
    Letzter Beitrag: 26-10-2007, 16:56
  3. Mithilfe bei einem Experiement!
    Von womstar im Forum Smalltalk
    Antworten: 3
    Letzter Beitrag: 19-12-2005, 23:07
  4. Bitten um Mithilfe!! Barrierefreies Forum Umfrage
    Von superchnago81 im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 08-01-2004, 17:07
  5. Bewegen von Layern mit JavaScript
    Von frankenstein im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 08-10-2001, 18:12

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •