Kurztipp Erstellen eines Theme-Switcher in 200 Sekunden

Haben Sie jemals Websites gesehen, die eine Art "Farbumschalter" im Kopfbereich bieten? Möchten Sie wissen, wie einfach es ist, zu replizieren? Ich zeige es Ihnen in 200 Sekunden mit jQuery.

Der Screencast

Zugegeben, dies ist ein sehr einfaches Beispiel. Was erwarten Sie in 200 Sekunden noch? :) Dies kann jedoch problemlos erweitert werden, um neue Stylesheets zu importieren, wenn Sie möchten.

Die letzte jQuery

 var colorOptions = 'schwarz, blau, orange, rot, grün'.split (', '), colorDivs = [], colorsContainer = $ (' # colorsContainer '); für (var i = 0, len = colorOptions.length; i < len; i++ )  var div = $('
') .css (' background ', colorOptions [i]) [0]; colorDivs.push (div);  colorsContainer.append (colorDivs); $ ('# header'). hover (Funktion () colorsContainer .fadeIn (200) .children ('div') .hover (Funktion () $ ('h2').) css ('color', $ (this ) .css ('backgroundColor')););, function () colorsContainer.fadeOut (200););

Fazit

Ich musste durch diesen Screencast zoomen, also zögern Sie nicht, Fragen in den Kommentaren zu diskutieren! Ich hoffe, dass es Ihnen gefallen hat! Gefallen Ihnen die "Zwei-Woche-Schnelltipps", die jetzt alle Tuts-Sites tun?

• Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts + RSS-Feed für die besten Webentwicklungs-Tutorials im Web.