Move

Auf dieser Seite:

DHTML Objekt bewegen

Auf dieser Seite lernen wir ein Objekt zu messen und zu repositionieren (sprunghaft).

Objekt messen

Objekte verschieben

Klicken Sie auf die Richtungstasten oder nutzen Sie im Urzeigersinn die Accesskeys 1-9 (z.B. im FF: ALT+SHIFT+1 für Nord, im IE: ALT+1).
Fahren Sie über das Objekt_2

obj.style.left = y+'px';

<script type="text/javascript">
/*----------------------------------------------------------------------------*/
function showsize() {
  var obj = document.getElementById("Objekt_1"); // Objekt holen
  var oB = obj.offsetWidth; // gegebene Breite
  var oH = obj.clientHeight; // gemessene Höhe

  alert('Size of Objekt_1 (B x H in px) = '+oB+' x '+oH); // Ausgabe
 } // ENDE Funktion showsize()

/*----------------------------------------------------------------------------*/

// globale Variablen (Ausgangspunkt linke obere Ecke von Objekt_1)
var x = 440; // Abstand nach oben
var y = 440; // Abstand nach links

// Funktion erwartet Objekt Nummer, Himmelsrichtung, Sprungweite in Pixeln
function move_it(objnr,richtung,pxl) {
  var obj = document.getElementById("Objekt_"+objnr); // 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 == 1100){ x = 440; }
  if(y == 0 || y == 1100){ 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()

/*----------------------------------------------------------------------------*/

function move_randomly() { // erwartet nichts
  kompass = new Array( 'n', 'no', 'o', 'so', 's', 'sw', 'w', 'nw');
// Erzeugt zufällige Ganzzahl 0 bis 7 für Array Index
  randomly = (Math.round(Math.random() * 8));

// Aufruf Funktion move_it() 
// mit Übergabe von Objektnummer 2, Himmelsrichtung, 110px Sprungweite
  move_it('2',kompass[randomly],110)
 } // ENDE Funktion move_randomly()
/*----------------------------------------------------------------------------*/
</script>

So sieht ein Button aus: <input type="button" value="N" onclick="move_it('1','n',20)" />

So sieht Objekt_2 aus: <div id="Objekt_2" onmouseover="move_randomly()">...</div>

So sieht das CSS von Objekt_1 aus (Objekt_2 ist fast identisch):

<style type="text/css" media="screen">
#Objekt_1 {
  position:absolute;
  top:440px;left:440px;
  background-color:Gold;
  padding:10px;
  z-Index:500; /* Objekt_2 hat 501, kann also Objekt_1 überdecken */
 }
</style>

Ich bin das Objekt_1,
ich werde in alle
Himmelsrichtungen
verschoben.

Ich bin das Objekt_2,
fang mich doch,
ich springe davon.

Fenster verschieben

Statt eines Seiten-Objektes ein Fenster (das Window-Objekt) zu verschieben: Popup platzieren

Check den Code.

Animation >> << Fix

Ich bin hier: > JavaScript Lehrling >>> Move