yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Waagerechter Newsticker



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>
-Bereich der Seite ein:
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>
-Tag fürge noch folgendes ein:
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
kommt der anzuzeigende Text. Für jede neue Anzeige muss eine neue Zeile der Art
Code:
{meldung:"Text", starteffekt:x, endeeffekt:y},


benutzt werden.
Code:
Text
ersetzt du mit dem entsprechenden anzuzeigenden Text,
Code:
x
durch die entsprechende Zahl, die für den Anfangseffekt steht (1 für ausrollen, 2 für blinken) und
Code:
y
eben durch den Endeffekt (1 für einrollen, 2 für blinken).

Die Farben kannst du in dem
Code:
<form>
-Tag ändern: mit
Code:
background-color
bestimmst du die Hintergrundfarbe, mit
Code:
color
die Textfarbe, mit
Code:
font-size
die Schriftgröße, mit
Code:
font-family
kannst du eine Schriftart angeben und
Code:
size
steht für die Länge des Tickers (um es anschaulich zu machen: es passen in einen Ticker exakt soviele
Code:
a
's rein, wie du unter
Code:
size
angibst.. ;)

Geschrieben von Phil Marx am 18.06.2004 (6367x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren