 Textticker 01 zeilen- + buchstabenweise Anzeige
Kontinuierliche Anzeige von Textnachrichten. In einem Array abgelegte Texte werden zeitgesteuert nacheinander in einer Zeile Buchstabe für Buchstabe angezeigt. Formatierung durch CSS-Anweisungen.
|
|
Kurztexte als Tickertext anzeigen (Fernschreiber)
UPDATE 23.01.2012 Funktion neu, Ablage der Texte im Array, Formatierung der Box
Mit dem Begriff 'Ticker' bezeichnet man umgangssprachlich einen Fernschreiber. Ähnlich wie bei einem solchen Nachrichtenticker werden bei diesem Anwendungsbeispiel Texte Buchstabe für Buchstabe zeilenweise 'geschrieben'.
Beliebig viele Textzeilen mit JavaScript nacheinander anzeigen. Die Texte für jede Nachrichtenzeile werden in einem Array abgelegt. Das Script arbeitet die Elemente das Arrays nacheinander ab und beginnt nach dem letzten Eintrag wieder von vorne.
Textticker 01 - Demo 01
Der Textticker kann als sichtbare Box oder als simple Textzeile (ohne Rand und Hintergrund) im HTML-Dokument eingebunden werden.
Textticker 01 - Demo 02
Textticker 01 - Demo 04
Wenn Sie sich gestalterisch betätigen wollen legen Sie den Ausgabebereich für die Tickertexte an eine punktgenaue Position über eine ansprechende Grafik:
(weitere Grafiken siehe unten)
Aufwand
- Script in den Head-Bereich kopieren
- CSS-Anweisungen in den Head-Bereich kopieren
- Funktionsaufruf im Body notieren
- Geschwindigkeit anpassen
- Textnachrichten anpassen
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript  JavaScript Menü 01
Anzeigeort
Notieren Sie die DIVs für die Tickerbox im Body-Bereich an der Stelle, wo der Ticker angezeigt werden soll.
<div id="AnzeigeBox">
<div id="TextBox"></div>
</div>
Anpassung der Geschwindigkeit
Die Geschwindigkeit für die einzelnen 'Ticks' des Fernschreibers zur Anzeige der Buchstaben nacheinander können Sie einstellen. Ein kleiner Zahlenwert beschleunigt, ein großer Wert verlangsamt die Anzeige (default: 50).
// Ticker Geschwindigkeit
var delay = 50;
Texte
Die Texte werden in einem Array abgelegt:
TextArray[0] = 'aktuelle Information für den nächsten Spieltag';
TextArray[1] = 'SG Union 94 Würm-Lindern Kreisklasse A';
TextArray[2] = 'Heimspiel am 06. Dezember 2013';
TextArray[3] = 'Anpfiff um 15:00 Uhr, Schiedsrichter Sven Triller';
TextArray[4] = 'Libero Jupp Zupp ist verletzt (Bienenstich)';
TextArray[5] = 'Gomzales ist nach Pause wieder dabei';
TextArray[6] = 'Autogrammstunde am Sonntag um 17:30 Uhr';
TextArray[7] = 'Training am 24.07. fällt aus!';
TextArray[8] = 'Die Texte werden in einem Array abgelegt';
TextArray[9] = 'weitere Texte können Sie im Array eintragen';
Formatierung der Anzeigebox und der Texte
1 CSS-Anweisungen 01 (default)
Für eine 'sichtbare' Box bestimmen Sie den Rand und passen die Hintergrundfarbe an. Mit einem Eintrag für 'background-color' erscheint die Hintergrundfarbe der Box im festgeleten Farbton.
#AnzeigeBox {
background-color: #F9FCFF;
width: 500px;
height: 24px;
border: 1px solid #D0DCEB;
}
#TextBox {
padding: 3px;
margin: 0px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #5F5F5F;
}
2 CSS-Anweisungen 02 (Box unsichtbar, ohne Rand)
Für eine 'unsichtbare' Box entfernen Sie den Rand und passen die Hintergrundfarbe an. Wenn Sie den Eintrag für 'background-color' weg lassen, erscheint die Hintergrundfarbe der Box im Farbton der Seite. Sollte es Probleme mit der Hintergrundfarbe geben versuchen Sie alternativ den Eintrag: background-color: transparent;
#AnzeigeBox {
width: 500px;
height: 24px;
border: none;
}
#TextBox {
padding: 3px;
margin: 0px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #5F5F5F;
}
3 CSS-Anweisungen 03 (Box mit Hintergrundgrafik)
Statt einer Hintergrundfarbe können Sie für den Textticker auch eine Hintergrundgrafik festlegen. Notieren Sie die Datenquelle der Grafik innerhalb der Klammern..
#AnzeigeBox {
background:url(bg-streifen.gif) #F9FCFF;
width: 500px;
height: 24px;
border: 1px solid #D0DCEB;
}
#TextBox {
padding: 3px;
margin: 0px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #5F5F5F;
}
Grafiken 550 x 100 Pixel (für Demo 04)
 Textrotation 02 - Kurztexte nacheander anzeigen
Scroller-Box 02 - (modifiziertes Fremdscript)
Headliner News-Box - (längere) Nachrichten mit Überschrift + Link
Anzeigetafel-Text 01 - Flippbord - Buchstaben einzeln ersetzen
|
Home • DHTML • Textticker 01
Demo-01
DOWNLOAD