Rask Tips Hvordan lage en tema-bryter på 200 sekunder

Har du noen gang sett nettsteder som tilbyr noen form for "fargebryter" i overskriftsdelen? Vil du vite hvor lett det er å replikere? Jeg vil vise deg om 200 sekunder, ved hjelp av jQuery.

The Screencast

Gitt, dette er et veldig enkelt eksempel. Hva mer forventer du på 200 sekunder! :) Men dette kan enkelt utvides til å importere nye stilark, hvis du ønsker det.

Den endelige jQuery

 var colorOptions = 'svart, blå, oransje, rød, grønn'.split (', '), colorDivs = [], colorsContainer = $ (' # colorsContainer '); for (var i = 0, len = colorOptions.length; i < len; i++ )  var div = $('
') .css (' background ', colorOptions [i]) [0]; colorDivs.push (div);  colorsContainer.append (colorDivs); $ ('# header'). hover (funksjon () colorsContainer .fadeIn (200) .children ('div') .over (funksjon () $ ('h2'). css ('color', $ ) .css ('backgroundColor'));, funksjon () colorsContainer.fadeOut (200););

Konklusjon

Jeg måtte zoome gjennom denne skjermbildet, så vær så snill å diskutere / stille spørsmål i kommentarene! jeg håper du likte det! Liker du "to-en-ukers" raske tips om at alle Tuts-nettstedene nå gjør det?

• Følg oss på Twitter, eller abonner på Nettuts + RSS-feed for de beste webutviklingsopplæringene på nettet.