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

Letzte Posts aus unserem Forum

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 1 Antwort
Letzter Beitrag: Montag, 23. Januar 2012 17:02 von alm

Hallo, wenn es um einen MP3-Player geht, dann sollte jplayer das Richige sein. Einfach mal den Suchschlitz der Suchmaschine Deiner Wahl nutzen. ... » mehr

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet

Galerie Erweiterung

Hi, zu erst mal ein Lob an Eure Galerie. Nun habe ich allerdings eine Frage um die Galerie eventuell zu erweitern. Derzeit wird auf meiner Seite ... » mehr

von G-RuN am Dienstag, 25. Januar 2011 17:13 in JavaScript - bisher 8 Antworten
Letzter Beitrag: Dienstag, 1. Februar 2011 17:11 von G-RuN

Hat sich erledigt. Mir haben noch die Zuweisung von der Variablen anzahl_bilder und anzahl_thumbnails gefehlt. Grüße, ... » mehr

bei submit ein neues Fenster öffnen

Hallo, ich habe hier ein kleines Problem und ... » mehr

von Kallchen am Freitag, 14. Januar 2011 23:07 in JavaScript - bisher 3 Antworten
Letzter Beitrag: Samstag, 15. Januar 2011 12:47 von alm

window.location = "_blankeineseite.html"; Das funktioniert auf keinen Fall. Die Location-Eigenschaft muss eine URL enthalten und wird bei ... » mehr



¬ Insolvenzrecht