Вы когда-нибудь видели сайты, которые предлагают какой-то «переключатель цвета» в разделе заголовка? Хотите знать, как легко копировать? Я покажу вам через 200 секунд, используя jQuery.
Скринкаст
Конечно, это очень простой пример. Что еще вы ожидаете через 200 секунд! 🙂 Но, если хотите, это может быть легко расширено для импорта новых таблиц стилей.
Финальный jQuery
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
var colorOptions = ‘black, blue, orange, red, green’.split(‘, ‘),
colorDivs = [],
colorsContainer = $(‘#colorsContainer’);
for ( var i = 0, len = colorOptions.length; i < len; i++ ) {
var div = $(‘<div />’).css(‘background’, colorOptions[i])[0];
colorDivs.push(div);
}
colorsContainer.append(colorDivs);
$(‘#header’).hover(function() {
colorsContainer
.fadeIn(200)
.children(‘div’)
.hover(function() {
$(‘h2’).css(‘color’, $(this).css(‘backgroundColor’));
});
}, function() {
colorsContainer.fadeOut(200);
});
|
Вывод
Мне пришлось просматривать этот скринкаст, поэтому не стесняйтесь обсуждать / задавать вопросы в комментариях! Надеюсь, вам понравилось! Вам нравятся быстрые советы «два раза в неделю», которые сейчас делают все сайты Tuts?
- Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.