Сайт хамелеона, изменение цвета сайта с помощью селектора цвета - PullRequest
Новая
       22

Сайт хамелеона, изменение цвета сайта с помощью селектора цвета

0 голосов
/ 09 февраля 2011

Я хочу узнать, как я могу создать сайт, цвет фона и изображений которого будет изменяться пользователем. Цвета могут изменяться только на один цвет в пределах 4 цветов, таких как зеленый, синий, белый и т. Д. На сайтах, таких как msn, yahoo и т. Д. Но на этих изображениях не было таких эффектов, как тень или градиентное наложение. Тем не менее, я хочу изменить цвет изображений, которые применяют такие эффекты, как тень, наложение градиента. Причем с каждым цветом. Так же, как хамелеон.

Я могу поставить текстовую ссылку справа вверху. Селектор цвета, как в Photoshop, может открыться, когда пользователь нажал на эту ссылку. Селектор цвета генерирует шестнадцатеричный код в соответствии с выбранным цветом. Цвет сайта меняется на цвет, выбранный пользователем.

Я изменил цвет фона изображения, который прозрачен с помощью JavaScript DOM. Цвет прозрачной области на изображении будет таким же, как и цвет фона тега div, который содержит это изображение. Но если изображение имеет такие эффекты, как тень, наложение и т. Д., Изменение цвета будет отключено.

Как я могу это сделать, и какую технологию я буду использовать, jQuery, Ajax? Как создать сайт, цвет которого может измениться. Как создать сайт, цвет которого будет изменяться пользователем.

Так же, как хамелеон ...

1 Ответ

0 голосов
/ 10 февраля 2011

Хм, ну, это может занять некоторое время для реализации, если вы начинаете с небольшого количества знаний.

Мое предложение, для начала, это иметь javascript, который изменяет класс элемента bodyв соответствии с выбором, который делает пользователь.Допустим, я захожу на страницу, у тега <body> нет класса и используется css по умолчанию.

Затем я нажимаю на ссылку, чтобы сделать красный цвет.Используя javascript или jquery, присвойте телу класс "red-body".

Включите в таблицу стилей css, которая работает только для элементов, которые являются потомками элемента этого класса. 

Html:
<a href="" class="go-red">Go Red</a>

jQuery
$('.go-red').click(function(){$('body').removeClass();$('body').addClass('red-body');});

Так что, если у вас есть код вроде: 

#navigation li{color:#000;}
.red-body #navigation li{color: #af000;}

Это сделает это возможным.Это означает, что вы можете сделать все это только с одной таблицей стилей, что, я думаю, является наилучшим способом.

Существует несколько способов сохранить выбор пользователя.Один из самых простых способов - установить cookie в своем браузере.Вы можете сделать это с помощью JavaScript, вот введение от w3schools: http://www.w3schools.com/JS/js_cookies.asp

...