Snabbtips Hur man skapar en temaförare på 200 sekunder

Har du någonsin sett webbplatser som erbjuder någon form av "färgbrytare" inom rubrikavsnittet? Vill du veta hur lätt det är att replikera? Jag visar dig på 200 sekunder med jQuery.

Screencast

Beviljas, det här är ett mycket enkelt exempel. Vad mer förväntar du dig om 200 sekunder! :) Men det här kan enkelt utökas till att importera nya stylesheets, om du vill.

Den sista jQuery

 var colorOptions = 'svart, blå, orange, röd, green'.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'). sväva (funktion () colorsContainer .fadeIn (200) .children ('div') .hover (funktion () $ ('h2'). css ('färg', $ ) .css ('backgroundColor'));, funktion () colorsContainer.fadeOut (200););

Slutsats

Jag var tvungen att zooma igenom den här skärmbilden, så var god att diskutera / ställa frågor i kommentarerna! Jag hoppas att du tyckte om det! Tycker du om "två-veckors" snabba tips som alla Tuts-webbplatser gör nu?

• Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.