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.