Java Reference
In-Depth Information
hier wieder mit einer externen JavaScript-Datei arbeiten und auch die CSS-Formatierungen
sind bei diesem Beispiel von Bedeutung. Hier ist zuerst die HTML-Datei
(kap8_16.html):
Listing 8.37■
Die zu animierende Webseite
...
<link rel="stylesheet" type="text/css" href="lib/css/kap8_16.css" />
<script type="text/javascript" src="lib/js/kap8_16.js"></script>
</head>
<body>
<h3>Animationen</h3> <div id="ani1"></div> <hr />
<img src="images/b2.jpg" alt="Landschaft" id="ani2"/>
</body>
</html>
In der referenzierten CSS-Datei werden vor allen Dingen der DIV-Bereich und das Bild in
der Breite auf 0 Pixel festgelegt. Dazu selektieren wir die Objekte über die jeweilige ID:
Listing 8.38■
Die CSS-Datei kap8_16.css
body {
background-color: lightgray;
}
h3 {
background-color: black; color: white; text-align: center;
}
#ani1 {
width: 0px; height: 10px; background-color: red;
}
#ani2 {
width: 0px;
}
Die Festlegung der Breite über CSS ist wichtig, denn diese CSS-Werte wollen wir per
JavaScript verändern und dazu ist es notwendig, dass der Wert vorher explizit initialisiert
wurde. Die Animationen werden in der JavaScript-Datei deiniert und auch dort über
JavaScript-Eventhandler aufgerufen:
Listing 8.39■
Mit setTimeout() können Sie auf einfache Weise Animationen erstellen.
var i = 0;
var j = 0;
function animation1() {
i++;
document.getElementById("ani1").style.width = i + "px";
if (i > 500) i = 0;
setTimeout('animation1()', 2);
}
function animation2() {
j++;
document.getElementById("ani2").style.width = j + "px";
if (j > 400) j = 0;
setTimeout('animation2()', 10);
}
function init() {
animation1();
animation2();
Search WWH ::
Custom Search