Koden, der indsætter overskriften og start-knappen i dokumentet, ser ud som følger:
|
<H4 ID="animtxt">Eksempel 3 - Flyvende tekst</H4><P> <FORM NAME="startanim2"> <INPUT TYPE=button VALUE=Start NAME="flyvtxt" onClick=flytTxt(3)> </FORM> |
Ved klik på knappen kaldes JavaScript-funktionen flytTxt med en parameter, der angiver, hvor mange gange teksten skal køre over skærmen.
Animationen starter automatisk, idet funktionen flytTxt også kaldes fra BODY-taget (<BODY onLoad="flytTxt">).
I dokumentets hoved, før BODY-taget, angives dels en STYLE-definition og dels en JavaScript-kodestump med bl.a. funktionen flytTxt.
Koden ser ud som følger:
<STYLE TYPE="text/css">
#animtxt {position:relative; left:-1000px}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// var counter = 3;
function flytTxt(counter) {
if (document.all) {
// Sikrer at browseren kun udfører koden, hvis det er en nyere
// Internet Explorer, der er i stand til at forstå koden
var elm = document.all.animtxt;
if (counter >= 1) { // Er vi færdige?
// Er elementet elm uden for skærmen?
if (-1000 == elm.style.pixelLeft) {
// sæt elementet lige uden for skærmen
elm.style.pixelLeft = document.body.offsetWidth + document.body.scrollLeft;
}
if (20 <= elm.style.pixelLeft) {
elm.style.pixelLeft -= 20; // Flyt teksten 20 pixels mod venstre
setTimeout("flytTxt(" + counter + ");", 50);
} else { // teksten er mindre end 20 pixels fra venstre kant
if (counter >= 2) {
// sæt elementet lige uden for skærmen
elm.style.pixelLeft = document.body.offsetWidth + document.body.scrollLeft;;
} else {
sæt elementet ved venstre kant
elm.style.pixelLeft = 0;
};
counter = counter - 1;
setTimeout("flytTxt(" + counter + ");", 50);
}
}
} else {
if (document.layers) {
// Sikrer at browseren kun udfører koden, hvis det er en nyere
// Netscape Navigator, der er i stand til at forstå koden
var elm = document.layers["animtxt"];
if (counter >= 1) { // Er vi ved sidste runde?
// Er elementet elm uden for skærmen?
if (-1000 == elm.left) {
// sæt elementet lige uden for skærmen
elm.left = (window.innerWidth + 10);
}
if (20 <= elm.left) {
elm.left -= 20;
setTimeout("flytTxt(" + counter + ");", 50);
} else {
if (counter >= 2) {
elm.left = window.innerWidth + 10;
} else {
elm.left = 0;
};
counter = counter - 1;
setTimeout("flytTxt(" + counter + ");", 50);
}
}
}
};
};
// -->
</SCRIPT>
|