Java & JavaScript


Home
Applets
Scripts
   Navigation:
 · Kontextmenü
 · Linkwechsler
   Dialogboxen:
 · Alert
 · Alert 2
 · Confirm
 · Prompt
   Animation:
 · Kreis
 · Kreis 2
 · Kreis 3
 · Drei Kreise
 · Spirale
 · Planetarium
 · Globus
   Grafik-Effekte:
 · Clipping
 · Clipping 2
 · Clipping 3
 · Alpha-Clipping
 · Fading
 · Wellenmuster
 · Wellenmuster 2
   Bildschirmschoner:
 · Proto
 · Marquee
 · Donut
 · Worm
 · Mondrian
 · Pacman
   Datum & Uhrzeit:
 · Countdown
 · Countup
 · Wochentag
 · Last Modified
   Fraktale:
 · Apfelmännchen
 · Apfelmännchen 2
 · Juliamenge
 · Juliamenge 2
 · C-Wert-Generator
   Mathematik:
 · Primzahlen
 · Primzahlen 2
   Verschiedenes:
 · Dynamic Popup
 · TextArea Counter
 · Warteschleife
 · Mausschreiber
Gäste
Kontakt

- JavaScript : Animation : Spirale -


Geometrische Figuren mit JavaScript: Eine einfache Spiralbewegung.

Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 4.75, 7.0 und 7.1, Mozilla 1.21 und 1.4, sowie Opera 5.02, 5.11 und 6.0
Leider sehr langsam in: Netscape 6.01 - 6.22, Mozilla 1.0 und Opera 7.01.


Demo:


JavaScript-Quellcode:

<script language="JavaScript">
  // div-tags für die Punkte zunächst außerhalb des Bildschirms platzieren
  document.write("
    <style type='text/css'>div{position:absolute;left:-300px;top:-300px}</style>");

  // Anzahl der Punkte bestimmen und div-Tags schreiben (+1 wg. Opera-Bug mit 0)
  for(i=0;i<101;i++) document.write("<div id='P" + i + "'>°</div>");

  var alpha=0;
  // Radien der einzelnen Elemente
  var R=new Array();
  for(a=1; a<101; a++) R[a]=a*1.2;

  // Browserweiche (ie 5+ und nn 6+ / ie 4+ / nn 4.x)
  var laySyntax=new Array();
  for(i=0;i<101;i++) {
    if(document.getElementById) laySyntax[i]=document.getElementById("P"+i).style;
    else if(document.all) laySyntax[i]=document.all.tags("div")[i].style;
    else if(document.layers) laySyntax[i]=document.layers[i];
  }

  function move() {
    for(p=1;p<101;p++) {
      laySyntax[p].left=125+R[p]*Math.cos(alpha+0.2*p);
      laySyntax[p].top=125+R[p]*Math.sin(alpha+0.2*p);
    }

    // Winkel-Geschwindigkeit
    alpha=alpha-0.02;
    setTimeout ('move()',50);
  }
</script>

Gestartet wird die Spirale durch die Anweisung onload="move()" im body-Tag.


Download  Spirale.zip (ca. 1 kb)




© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | Nutzung | eMail