Geometrische Figuren mit JavaScript: Eine einfache Kreisbewegung um eine Achse.
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, 6.0 und 6.01
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 sichtbaren Bildschirms platzieren
document.write(
"<style type='text/css'>div{position:absolute;left:-300px;top:-300px}</style>");
// Anzahl der Pünktchen bestimmen und in div-Tags schreiben (+1 wg. Opera-Bug mit 0)
for(i=0;i<101;i++) document.write("<div id='P" + i + "'>.</div>");
// 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];
}
// Kreisbewegung
// 100 = Radius, 125/110 = Nullpunkt
// 0.0628 = 2*Pi/Punkteanzahl pro Kreis = 2*Pi/100
// = Abstand der Elemente zueinander in Radiant (rad)
// Diese Angaben bestimmen die Größe des Kreises
var alpha=0;
function move() {
for(p=1;p<101;p++) {
laySyntax[p].left=125+100*Math.cos(alpha+0.0628*p);
laySyntax[p].top=110+100*Math.sin(alpha+0.0628*p);
}
// Winkel-Geschwindigkeit
alpha=alpha-0.01;
setTimeout('move()',50);
}
</script>
Gestartet wird die Kreisbewegung durch die Anweisung onload="move()" im body-Tag.
Natürlich können Sie auch kleine Grafiken statt der Punkte verwenden. Die Punkte haben allerdings den Vorteil, dass sie sich der jeweiligen Bildschirmauflösung anpassen.