JavaScript Window clearInterval Beispiel 2: Ein Fader zum Ein- und Ausblenden von Text

<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



¬ Insolvenzrecht