Javascript  »  Animationen  »  Multifader

zur Übersicht

Kategorie	Animationen
Bezeichnung	Multifader
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	15323 Aufrufe davon 0x gestern
Besten Dank an kakalake.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <SCRIPT LANGUAGE="JavaScript"> <!-- var hexArray = new Array(0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"); /////////////////////////////// User-Variablen /////////////////////////////////////////// var step = 40; //Die Anzahl der Farbpaletteneinträge. Die Farbabstufungen var max_Object = 5; //Anzahl der Zellen, Objekte //Berechne Farbübergänge //Man muss die Farben noch fürs ein- und ausfaden anpassen var colors = new Array(step); //Farbübergang für die Zelle createColorTable( colors, 229, 229, 229, 192, 192, 192 ); var colors2 = new Array(step); //Farbübergang für die Schrift createColorTable( colors2, 192, 192, 192, 0, 0, 0 ); ////////////////////////////////////////////////////////////////////////////////////////// function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexArray[Math.floor(i/16)] + hexArray[i%16]; } //FadeObjekte var fadeArray = new Array( max_Object ); //Anzahl der Objekte, sprich der zu fadenden Felder for ( i=0; i<fadeArray.length; i++ ) fadeArray[i] = new Objekt(); //Param1: Das zu füllende Array //Param2,3,4: Fadeout-Color //Param5,6,7: Fadein-Color function createColorTable( array, max_r, max_g, max_b, min_r, min_g, min_b ) { for ( i=0; i<array.length; ++i) { var r = Math.floor(max_r * ((step - i)/ step) + min_r * (i / step)); var g = Math.floor(max_g * ((step - i)/ step) + min_g * (i / step)); var b = Math.floor(max_b * ((step - i)/ step) + min_b * (i / step)); array[i] = "#"+hex(r)+hex(g)+hex(b); } } //Der 1 Parameter ist der index des Objekts, welches gefadet werden soll. Index beginnt ab 0 //Der 2 Parameter gibt den Faktor an. Der Faktor ist der Wert wie schnell die Farbpalette durchlaufen werden soll. function fade( elementNr, faktor ) { var e = fadeArray[elementNr]; if ( e.typ & 1 ) e.element.style.backgroundColor = "" + colors[Math.round(e.i)]; if ( (e.typ & 1) && (e.element.style.backgroundColor == "") ) e.element.style.background = "" + colors[Math.round(e.i)]; if ( e.typ & 2 ) e.element.style.color = "" + colors2[Math.round(e.i)]; if ( (!e.direction && e.i >0) || (e.direction && e.i<step-1) ) { if ( e.direction ) e.i += faktor; else e.i -= faktor; if ( e.i < 0 ) e.i = 0; else if ( e.i >step-1 ) e.i = step-1; setTimeout("fade("+elementNr+","+faktor+");",step); } } //Das Objekt welches gefadet werden soll function Objekt() { this.element = 0; this.i = 0; this.direction = 0; this.typ = 1; } //nr: Nummer des Fadeobjektes //element: Das Objekt //faktor: Schnelligkeit des Fadens 1=normal(Arbeite alle Farbübergänge ab). Faktor 5 bedeutet: "Jede 5 Farbe", also 5 mal so schnell //fadetyp: Was wollen sie faden 1=Tabellenzelle; 2=Text; 3=Beides; 0=nichts function fadein( nr, element, faktor, fadetyp ) { var e = fadeArray[nr]; if ( e.element == 0 ) e.element = element; e.direction = 1; e.typ = fadetyp; fade(nr,faktor); } //nr: Nummer des Fadeobjektes //faktor: Schnelligkeit des Fadens 1=normal(Arbeite alle Farbübergänge ab). Faktor 5 bedeutet: "Jede 5 Farbe", also 5 mal so schnell function fadeout( nr, faktor ) { fadeArray[nr].direction = 0; fade(nr,faktor); } //--> </script> <table border="0" cellspacing="5" cellpadding="0"> <tr> <td bgcolor="#E5E5E5" onMouseout="fadeout(0,1)" onMouseover="fadein(0,this,5,1)">Faden der Zelle</td> <td bgcolor="#E5E5E5" onMouseout="fadeout(1,1)" onMouseover="fadein(1,this,5,2)">Faden der Schrift</td> <td bgcolor="#E5E5E5" onMouseout="fadeout(2,1)" onMouseover="fadein(2,this,5,3)">Faden der Schrift und Farbe</td> <td onMouseout="fadeout(3,1)" onMouseover="fadein(3,this,5,1)" bgcolor="#E5E5E5"> <a style="color:#C0C0C0" onMouseout="fadeout(4,1)" onMouseover="fadein(4,this,5,2)" href="http://www.google.de">Faden der Schrift und Farbe mit Link</a> </td> </tr> </table>

Kommentare zu Multifader

2 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 12.03.2004 um 23:47 Uhr von Fisherman
Kann ich gut gebrauchen, genial geschrieben und gut auskommentiert. Danke!... 

am 24.02.2004 um 10:17 Uhr von Kolli
Super Script, gefällt mir sehr gut Danke an den Spender... 


Alle Kommentare anzeigen   -   Kommentar hinzufügen