Изменить интенсивность цвета на JQuery?

Здравствуйте уважаемые Хабрачеловеки.



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



Перетягивание ползунка сделать не проблема, а вот с интенсивностью что то я застрял



Не подскажете как изменить интенсивность цвета с помощью JS?



Желательно обойтись без плагинов!



Просто ранее с таким не сталкивался.



Заранее благодарен!
  • Вопрос задан
  • 3896 просмотров
Пригласить эксперта
Ответы на вопрос 5
medved13
@medved13
Ведущий front-end разработчик
В CSS3 есть HSL нотация цвета. Для уменьшения интенсивности надо уменьшать насыщенность (saturation). Для ИЕ меньше 8 можно писать цвет в RGB, конвертируя его из HSLa джаваскриптом.
Ответ написан
Комментировать
TrueDrago
@TrueDrago
Самый простой вариант — менять css свойство «opacity», например так:

$('#element').animate({opacity: "0.5"}, 500);
Ответ написан
@max_rip
Ну и для полной совместимости можно использовать конвертер HSL2RGB www.codingforums.com/showpost.php?p=54172&postcount=2
Ответ написан
Комментировать
trilodi
@trilodi Автор вопроса
Совместимость необязательна, это для современных мобильных браузеров"!
Ответ написан
Комментировать
code.google.com/p/flot/source/browse/trunk/jquery.colorhelpers.js
Используется в частности в flot.
Работает приблизительно так
$.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
позволяет удобно работать с цветом, меняя значения каналов вместе или по отдельности, на абсолютное или относительное значение.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы