nicht angemeldet
Moin,
Ok, auf besonderen Wunsch hier also ein Beispiel. Der Wert für das onLoad-Attribut ist etwas länger geworden als ich dachte, sind also vielleicht 4 Zeilen.
--snip--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Testticker</title>
<script language="javascript" type="text/javascript"><!--
function ticker(x,w)
{
x = (x + 1) % w;
document.getElementById("ticker").style.left = (-x)+"px";
window.setTimeout("ticker("+x+","+w+")", 50);
}
//--></script>
</head>
<body onLoad="ticker(0, parseInt(window.getComputedStyle(document.getElementById('ticker'),null).getPropertyValue('width'))/9);">
<div style="overflow: hidden; width:100%; white-space: nowrap;"><div id="ticker" style="position: relative; top:0px; left:0px;">bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl </div></div>
</body>
</html>
--snap--
Erklärung: Zunächst einmal ist da ein div, das sozusagen als Minifenster fungiert. Mit width: 100% wird es auf die gesamte Breite des Anzeigefensters ausgedehnt. Das white-space: nowrap sorgt dafür, dass der Inhalt nicht an Leerzeichen umbricht und overflow:hidden versteckt den Teil der über die Breite hinausgeht. Innerhalb dieses Divs befindet sich der eigentliche Ticker, der am Anfang relativ auf 0,0 positioniert ist. Dadrin ist der Text der im Ticker angezeigt werden soll. Um einen kontinuierlichen Effekt zu erzielen, muß er mehrfach wiederholt werden, ich habe hier für das Beispiel 9 Wiederholungen genommen. Du solltest das so anpassen, dass der Text immer das Fenster voll ausfüllt. (Eventuell möchtest du die zusätzlichen Wiederholungen auch mit JavaScript nach dem Laden erzeugen.)
Dann ist da etwas JavaScript-Code im onLoad-Attribut. Das Monster window.getComputedStyle(document.getElementById('ticker'),null).getPropertyValue('width') gibt die aktuelle Breite des ticker-divs zurück. Mit parseInt wird daraus eine Zahl gemacht und anschließend dividiere ich die Zahl durch die Anzahl der Wiederholungen, um die Breite einer Wiederholung zu bekommen.
Dann wird ticker() aufgerufen, der Parameter x auf 0 gesetzt (sollte dem für left angegebenen Wert entsprechen) und w auf die eben berechnete Breite.
In der ersten Zeile dieser Funktion wird x um 1 Schritt erhöht und modulo der Breite gerechnet. In der zweiten Zeile wird die left-Angabe von ticker auf den negativen Wert von x gesetzt (damit sich der Text nach links bewegt) und in der dritten Zeile wird die Funktion mit den aktuellen Werten von x und w nach 50 ms wieder aufgerufen.
Modifizieren kannst du den Code über das Vorzeichen von x (das ändert die Richtung), den zweiten Parameter von setTimeout (das ändert die Zeit pro Schritt) und die Zahl die zu x addiert wird (das ändert die Schrittweite; Vorsicht: wenn w nicht glatt durch diese Zahl teilbar ist, könnte es so aussehen als ob der Ticker springt).
Offensichtliche Verbesserungen: Der Code ist reines DOM, für nicht ganz so moderne Browser (IE 5/6 zum Beispiel) musst du hier und da etwas verändern. Das getComputedStyle()-Konstrukt wäre zum Beispiel nach Microsoft-Art ein document.getElementById('ticker').currentStyle.width . Ausserdem möchtest du vielleicht den document.getElementById("ticker")-Aufruf auslagern und das Ergebnis in einer globalen Variablen speichern.
--
Henryk Plötz
Grüße aus Berlin