<span id="faderelement" style="width:20em;color:#FFFFFF">Fade-In mit der ersten Meldung!</span><br> <span id="faderelement2" style="width:20em;">Fade-Out mit der zweiten Meldung!</span><br> <span id="faderelement3" style="width:20em;color:#FFFFFF">Fade-Out und Fade-Out mit der dritten Meldung!</span><br> <a href="javascript:textfader (FADE_IN, 'faderelement')" title="">Fade-In</a> <a href="javascript:textfader (FADE_OUT, 'faderelement2')" title="">Fade-Out</a> <a href="javascript:textfader (FADE_IN ¦ FADE_OUT, 'faderelement3')" title="">Fade-In/Out</a> <script language="javascript" type="text/javascript"> <!-- // JavaScript-Bereich für ältere Browser auskommentieren // Konstanten zur Definition der verschiedenen Fading-Vorgänge var FADE_IN = 1; var FADE_OUT = 2; // Funktion implementiert das zeitgesteuerte Fading der Textfarbe // Als Parameter erwartet die Funktion den Fading-Modus (fade-in, // fade-out oder beides) und den Namen des HTML-Elementobjekt, mit // dem der Vorgang durchgeführt werden soll. Wird kein Modus vom // Benutzer angegeben, so nimmt die Funktion FADE_IN an. Fehlt die // Angabe eines Elements, so wird ein Element mit Namen faderelement // verwendet. function textfader (mode, element) { // Hexadezimale Ziffern zur Festlegung der Textfarbe im Stylesheet var h = '0123456789ABCDEF'; // Wurde die Funktion zum ersten Mal gestartet oder ist ein zuvor // gestarteter Fading-Vorgang bereits beendet? if (typeof icol == 'undefined' ¦¦ icol == -1) { // Wurde der Name des HTML-Elementobjekts angegeben? if (typeof element != 'undefined') // Wenn ja, dann soll dieses Element genutzt werden telement = element; else // Ansonsten wird ein Standardname verwendet telement = 'faderelement'; // Erstmal die Textfarbe des Elements auf Weiß bzw. Schwarz // setzen (je nach gewähltem Fading-Vorgang). document.getElementById (telement).style.color = (typeof mode == 'undefined' ¦¦ mode & FADE_IN) ? '#000000' : '#FFFFFF'; // Startfarbe festlegen icol = typeof mode == 'undefined' ¦¦ mode & FADE_IN ? 255 : 0; // Aktueller Fading-Moduns des Durchgangs festlegen fade = typeof mode == 'undefined' ¦¦ mode & FADE_IN ? FADE_IN : FADE_OUT; col = ''; // Intervallverarbeitung startem (Intervall von 10ms) // Für alle weiteren Durchgänge muss der Modus bekannt sein. // Aus diesem Grunde wird dieser bei jedem Aufruf der Funktion // im Parameter angegeben. faderinterval = window.setInterval ('textfader('+mode+')', 10); } // Farbe bei jedem Durchgang entsprechend dem Modus anpassen... icol += (fade == FADE_IN ? -5 : 5); // in hexadezimale Zeichenkette umwandeln... col = h[Math.floor (icol / 16)] + h[icol % 16]; // und dann den Style des Elements neu setzen. Die RGB-Farbkomponenten // werden hier mit gleichen Werten gesetzt (Schwarz <-> Weiß). document.getElementById (telement).style.color = '#' + col + col + col; // Sind wird am Ende eines Fade-in- oder Fade-out-Durchgangs angelangt? if (icol == 0 ¦¦ icol == 255) { // Ist Fade-in UND Fade-out im Modus gesetzt? if (typeof mode != 'undefined' && (mode & FADE_OUT) && (mode & FADE_IN)) { // Wurde soeben ein Fade-in-Durchgang beendet? if (fade == FADE_IN) // Am Ende des Fade-in folgt ab dem nächsten Aufruf der // Funktion ein Fade-out fade = FADE_OUT; else // Ansonsten sind wir fertig und setzen den Fader zurück icol = -1; } else // Wenn nur ein Fade-in ODER Fade-out durchgeführt werden soll // sind wir fertig und setzen den Fader ebenfalls zurück, damit // er ein weiteres mal gestartet werden kann icol = -1; // Ist der Fader zurückgesetzt worden? if (icol == -1) // Dann muss der Intervall beendet werden, damit keine weiteren // Aufrufe der Funktion erfolgen. window.clearInterval (faderinterval); } } // --> </script>
Fade-In mit der ersten Meldung!
Fade-Out mit der zweiten Meldung!
Fade-Out und Fade-Out mit der dritten Meldung!
Fade-In
Fade-Out
Fade-In/Out
¬ Menu
¬ Gratis Download
¬ Seminare
¬ Yoga
¬ Insolvenzrecht
¬ News
15.08.2008Schleifen in PHP: Die While-Schleife » mehr 13.08.2008Nutzung von Variablen unter PHP: Definition, Sichtbarkeit und vordefinierte Variablen » mehr 11.08.2008Ausgabe von Datum und Zeit mit PHP nach Konvertierung in ein String » mehr Eine vollständige News-Liste ist auf der News-Seite zugänglich.
¬ Foren
¬ Buchtipp
JavaScript
Weitere JavaScript Literaturtipps finden Sie unter JavaScript Bücher
Webdesign •
Beratung Internetseite •
Programmierung Internetseite