Das DOM – das Mysterium der JavaScript-Welt - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 262

break;
case 1 : u1.style.color = "yellow";
u1.style.backgroundColor = "black";
u1.style.fontSize = "12px";
u1.style.textAlign = "right";
seite.style.backgroundColor = "red";
u2.style.color = "white";
u2.innerHTML="autoren-net.de";
break;
case 2 :
u1.style.color = "red";
u1.style.backgroundColor = "white";
u1.style.fontSize = "22px";
u1.style.textAlign = "left";
seite.style.backgroundColor = "lightgray";
u2.style.color = "blue";
u2.innerHTML="vg-bodenheim.biz";
break;
default : u1.style.color = "cyan";
u1.style.backgroundColor = "gray";
u2.style.color = "cyan";
u2.innerHTML="liegerblog.rjs.de";
}
i %= 4;
setTimeout('ani()','2500');
}
window.onload=ani;
Das Beispiel ist als Endlosanimation konzipiert, denn beim Laden der Webseite wird mit
dem Eventhandler onload die Funktion ani() aufgerufen, die eine zeitgesteuerte Anima-
tion startet, die so lange weiter läut, bis die Webseite verlassen wird. Dabei greifen wir für
die Animation auf einen rekursiven Aufruf zurück, der über window.setTimeout() verzö-
gert wird. Die Webseite beinhaltet eine Überschrit der Ordnung 1. In der Funktion ani()
werden mit style die Stilinformationen der Überschriten sowie der Inhalt der Überschrit
vom Typ h3 verändert. Zusätzlich wird die Hintergrundfarbe des Körpers der Webseite
geändert. Die Animation benutzt zum Austausch der Stilinformationen den Modulo-Opera-
tor, um eine Zahl zwischen 0 und 4 zu berechnen, die in der folgenden switch-case -Anwei-
sung zur Auswahl der tatsächlichen Stilinformation verwendet wird. Im Abstand von 2,5
Sekunden wechseln so die Schritfarbe und die Hintergrundfarbe der Überschrit und
zusätzlich die Hintergrundfarbe der Webseite.
8.14.5.1■Eine Animation durch Manipulation von Graiken (style-Version)
Wir haben ja schon an anderen Stellen im Buch eine Animation durch die Manipulation von
Graiken bzw. deren DOM-Repräsentation mittels reinem JavaScript gesehen. Wir wollen
diese Animationstechniken jetzt etwas modiizieren und über das style -Objekt Graiken
verändern, wobei wir eine solche Animation bei der Behandlung von setTimeout() schon
ähnlich erstellt haben (siehe Seite 242). Beispiel (kap8_23.html):
Listing 8.59■ Eine Webseite mit einer Graik, die animiert werden soll
...
<link rel="stylesheet" type="text/css" href="lib/css/kap8_23.css" />
<script src="lib/js/kap8_23.js" type="text/javascript"></script>