JavaScript DIV Beispiel 5: JavaScript scroll DIV

<a href="javascript:init_div_position ('d', '0px', '0px')" title="">initialize DIV position (0px, 0px)</a><br>
<a href="javascript:scroll_div ('d', 20, 240, 13, '120px', '33em')" title="">scroll DIV (120px, 33em) -> (240px, 13em)</a><br>
<a href="javascript:scroll_div ('d', 20, 540, 540)" title="">scroll DIV (540, 540)</a><br>
<a href="javascript:scroll_div ('d', 20, 420, 540)" title="">scroll DIV (420, 540)</a><br>
<a href="javascript:scroll_div ('d', 20, 420, 420)" title="">scroll DIV (420, 420)</a><br>
<a href="javascript:scroll_div ('d', 20, 540, 420)" title="">scroll DIV (540, 420)</a>

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion zum Verschieben eines HTML-Elements über seine Style-Angaben left und top.
// Mit einer Timeout-Schleife wird ein schrittweises Scrollen durchgeführt, wodurch der
// Eindruck eines dynamisch animierten scrollings entsteht.
// Autor: Alexander Müller
// Internet: http://www.EvoComp.de
function scroll_div (element_id, timeout, left_end, top_end, left_start, top_start) {
  // Verweis auf das Element über seine ID ermitteln.
  var element = document.getElementById (element_id);
  // Wurde die Funktion scroll_div bereits aufgerufen (der Interval schon gestartet)?
  if (!proc) {
    // Ist dies nicht der Fall, so werden die Startwerte für left und top des Elements ermittelt.
    // Wurden Angaben zur Startposition des Elements gemacht, so werden diese umgehend
    // im Style des Elements gespeichert. Die Werte müssen hier mit Einheit angegeben werden,
    // damit bei der weiteren Verarbeitung klar ist, in welcher Einheit die Zielposition
    // angegeben ist.
    if (left_start)
      element.style.left = left_start;
    if (top_start)
      element.style.top = top_start;
    // Enthält der Style des Elements noch keine Angaben zur Position des DIV-Elements?
    if (!element.style.left ¦¦ !element.style.top)
      // Wenn der Browser die Methode getComputedStyle kennt, kann der Style über diese Methode ermittelt werden.
      // Bei modernen Browsern existiert diese Methode bereits seit längerem.
      // Unterstützt wird die Methode z.B. von allen Mozilla-Abkömmlingen (Firefox und andere Geckos),
      // Netscape ab Version 6, Opera ab 7.2 und Safari. Der IE kennt diese Methode bis Version 7
      // allerdings noch nicht!
      // ACHTUNG: Man beachte, dass der hierüber ermittelte Wert stets in Pixel angegeben ist!
      // Ist bei den Zielkoordinaten left_end oder top_end ein anderes Maß gemeint, so führt dies dazu, dass
      // dieser Wert als px-Angabe interpretiert wird!
      if (window.getComputedStyle) {
        var style = document.defaultView.getComputedStyle (element, null);
        element.style.left = style.getPropertyValue ('left');
        element.style.top = style.getPropertyValue ('top');
      }
      // Position bei IE mit currentStyle ermitteln.
      else if (element.currentStyle) {
        element.style.left = element.currentStyle.left;
        element.style.top = element.currentStyle.top;
      }
      // Konnten die Positionswerte nicht ermittelt werden, so wird als Ausgangsposition
      // die obere, linke Ecke des Fensters angenommen und als Einheit Pixel gewählt.
      else {
        element.style.left = '0px';
        element.style.top = '0px';
      }
    // Nummerischen Anteil der Startwerte für die Position des DIV-ELements ermitteln
    left_start = parseFloat (element.style.left);
    top_start = parseFloat (element.style.top);
    // Zyklischer Aufruf dieser Funktion mit den Start- und Endwerten starten...
    proc = window.setInterval ('scroll_div (\'' + element_id + '\', ' + timeout + ', ' + left_end + ', ' + top_end + ', ' + left_start + ', ' + top_start + ')');
    // und Beenden der Funktion. Sie wird mit dem angegebenen Timeout per Intervallverarbeitung
    // erneut aufgerufen so oft dies nötig ist um die eigentliche Arbeit zu erledigen.
    return;
  }

  // Der Folgende Teil wird erst ausgeführt, wenn der erste Zyklus des von setInterval gestarteten
  // Prozesses erreicht ist.
  // Einheit für die X-Achse ermitteln
  element.style.left.match (/[0-9.]+(.+)/);
  var ex = RegExp.$1 ¦¦ 'px';
  // Gleiches für die Y-Achse
  element.style.top.match (/[0-9.]+(.+)/);
  var ey = RegExp.$1 ¦¦ 'px';
  // Variablen zur Speicherung der Schrittweiten zur Änderung der Positionierung.
  var delta_x, delta_y;
  // Muss in der horizontalen bewegt werden?
  if (left_start != left_end) {
    // Schrittweite für die horizontale Positionierung wählen...
    delta_x = (ex == 'px' ¦¦ ex == 'pt') ? 2 : 0.02;
    // Anzahl der Schritte, die in der horizontalen gemacht werden müssen...
    var steps = (left_start < left_end ? left_end - left_start : left_start - left_end) / delta_x;
    // und aus diesen beiden Werten die Schrittweite in der Vertikalen berechnen.
    delta_y = (top_start < top_end ? top_end - top_start : top_start - top_end) / steps;
  }
  else {
    // In der horizontalen ist nichts zu tun...
    delta_x = 0;
    // und in der Vertikalen wird die Schrittweite festgelegt.
    delta_y = (ey == 'px' ¦¦ ey == 'pt') ? 2 : 0.02;
  }

  // Wenn die Zielposition noch nicht erreicht wurde...
  if (parseInt (element.style.left) != left_end ¦¦
      parseInt (element.style.top) != top_end) {
    // wird die neue Positionierung durch Addition der horizontalen Schrittweite berechnet.
    var left = parseFloat (element.style.left) + (left_start < left_end ? delta_x : -delta_x);
    // Ist das DIV-Element nicht weiter als eine Schrittweite von der horizontalen Zielposition entfernt,
    // so wird die Zielposition angenommen.
    left = (left > left_end ? left - left_end : left_end - left) < delta_x ? left_end : left;
    // DIV-Element an die neu berechnete horizontale Position setzen.
    element.style.left = left + ex;
    // Gleiches geschieht mit der Positionierung auf der vertikalen Achse.
    var top = parseFloat (element.style.top) + (top_start < top_end ? delta_y : -delta_y);
    top = (top > top_end ? top - top_end : top_end - top) < delta_y ? top_end : top;
    element.style.top = top + ey;
  }
  else {
    // Zielposition wurde bereits erreicht und ein weiterer Aufruf der Funktion ist nicht mehr nötig.
    // Intervall beenden, damit die Funktion nicht mehr zyklisch aufgerufen wird...
    window.clearInterval (proc);
    // und die Variable zur Speicherung der Intervall-ID zurücksetzen, damit weitere Aufrufe möglich sind.
    proc = null;
  }
}

// Variable zur Speicherung einer Intervall-ID, die zum
// Abbrechen einer zyklischen Verarbeitung benötigt wird.
var proc;

// Folgende Funktion dient der Initialisierung des DIV-Elements mit Werten zur
// linken, oberen Position.
// Als Parameter werden die Element-ID, sowie die Position des Elements auf
// der horizontalen und vertikalen (left, top) angegeben.
function init_div_position (element_id, left, top) {
  var element = document.getElementById (element_id);
  if (element) {
    element.style.left = left;
    element.style.top = top;
  }
}
// -->
</script>