JavaScripts > Text > Script-Detail: Waagerechter Newsticker
Waagerechter Newsticker
Ein kleiner Newsticker, der 2 Anfangs- und Endanimationen hat: Blinken und Buchstabe-für-Buchstabe-Aufbauen.Ein kleiner Newsticker, der 2 Anfangs- und Endanimationen hat: Blinken und Buchstabe-für-Buchstabe-Aufbauen. Sehr empfehlenswert, da er ohne ein (sichtbares) Formularfeld funktioniert.(Demo)
Füge folgendes in den
| Code: |
<head>...</head> |
| Code: |
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!-- // © Autor Dietmar Rabich // http://www.rabich.de function StartTicker() { document.NewsTicker.Zeile.value= "Bitte nutzen Sie einen aktuelleren Browser." } // Tickermeldungen // Es muessen alle drei Werte angegeben werden. // Effekte fuer Start: // 1: einrollen // 2: blinken // Effekte fuer Ende: // 1: ausrollen // 2: blinken var tickernews = [ {meldung:"ein- und ausrollendem Effekt.", starteffekt:1, endeeffekt:1}, {meldung:"Hier wird eingerollt und abschlie\xDFend geblinkt.", starteffekt:1, endeeffekt:2}, {meldung:"Nach dem eingehenden Blinken wird ausgerollt.", starteffekt:2, endeeffekt:1}, {meldung:"Jetzt wird am Anfang und am Ende geblinkt.", starteffekt:2, endeeffekt:2} ] // Tickerparameter var ticker_start = 500 // Wartezeit bis zur ersten Meldung var ticker_effekt1_start_a = 75 // Darstellungsgeschwindigkeit [ms] var ticker_effekt1_start_b = 2500 // Darstellungszeit der Meldung [ms] var ticker_effekt2_start_max_blink = 3 // Anzahl der Blinkdarstellungen var ticker_effekt2_start_a = 100 // Blinkgeschwindigkeit [ms] var ticker_effekt2_start_b = 2500 // Darstellungszeit der Meldung [ms] var ticker_effekt1_ende_a = 50 // Scrollgeschwindigkeit [ms] var ticker_effekt1_ende_b = 100 // Wartezeit bis zur naechsten Meldung [ms] var ticker_effekt2_ende_max_blink = 3 // Anzahl der Blinkdarstellungen var ticker_effekt2_ende_a = 100 // Blinkgeschwindigkeit [ms] var ticker_effekt2_ende_b = 1000 // Wartezeit bis zur naechsten Meldung [ms] // Interne Variablen var msgnr = 0 // Aufruf der naechsten Meldung function nextTicker() { msgnr++ if(msgnr >= tickernews.length) msgnr = 0 setTimeout("showTicker(0)", 1000) } // Effekte fuer Meldungsende function hideTicker(cnt) { switch(tickernews[msgnr].endeeffekt) { // Effekt 2 case 2: document.NewsTicker.Zeile.value = ((cnt % 2) == 1) ? tickernews[msgnr].meldung : "" if(cnt > (2 * ticker_effekt2_ende_max_blink + 1)) setTimeout("nextTicker(0)", ticker_effekt2_ende_b) else setTimeout("hideTicker(" + String(cnt + 1) + ")", ticker_effekt2_ende_a) break // Effekt 1 default: document.NewsTicker.Zeile.value = tickernews[msgnr].meldung.substring(cnt, tickernews[msgnr].meldung.length) if(cnt >= tickernews[msgnr].meldung.length) setTimeout("nextTicker()", ticker_effekt1_ende_b) else setTimeout("hideTicker(" + String(cnt + 1) + ")", ticker_effekt1_ende_a) } } // Effekte fuer Meldungsanfang function showTicker(cnt) { switch(tickernews[msgnr].starteffekt) { // Effekt 2 case 2: document.NewsTicker.Zeile.value = ((cnt % 2) == 1) ? "" : tickernews[msgnr].meldung if(cnt > (2 * ticker_effekt2_start_max_blink + 1)) setTimeout("hideTicker(0)", ticker_effekt2_start_b) else setTimeout("showTicker(" + String(cnt + 1) + ")", ticker_effekt2_start_a) break // Effekt 1 default: document.NewsTicker.Zeile.value = tickernews[msgnr].meldung.substring(0, cnt) if(cnt >= tickernews[msgnr].meldung.length) setTimeout("hideTicker(0)", ticker_effekt1_start_b) else setTimeout("showTicker(" + String(cnt + 1) + ")", ticker_effekt1_start_a) } } // Start des Tickers function StartTicker() { // Standardmeldung document.NewsTicker.Zeile.value = "Ticker wird geladen..." // Ticker starten setTimeout("showTicker(0)", ticker_start) } //--> </SCRIPT> |
und in den
| Code: |
<body> |
| Code: |
onLoad="StartTicker()" |
Und nochwas... Da wo der Ticker erscheinen soll, kommt dies hin:
| Code: |
<FORM NAME="NewsTicker">
<INPUT TYPE="TEXT" READONLY STYLE="border: none; background-color: #000033; color: #FFFFFF; font-size: 80%; font-family: monospace;" NAME="Zeile" SIZE=60 MAXLENGTH=60"> </FORM> |
Das Script ist an sich recht gut auskommentiert, dass ich hier noch kaum Hinweise geben brauche. Aber hier doch noch einige Hilfen. Hinter
| Code: |
var tickernews |
| Code: |
{meldung:"Text", starteffekt:x, endeeffekt:y}, |
benutzt werden.
| Code: |
Text |
| Code: |
x |
| Code: |
y |
Die Farben kannst du in dem
| Code: |
<form> |
| Code: |
background-color |
| Code: |
color |
| Code: |
font-size |
| Code: |
font-family |
| Code: |
size |
| Code: |
a |
| Code: |
size |
Geschrieben von Phil Marx am 18.06.2004 (4242x gelesen)
weiterempfehlen
Druckversion
kommentieren