Задавайте вопросы

Задавайте вопросы и получайте ответы от нашего сообщества

Отвечайте

Отвечайте на вопросы и станьте экспертом по своей теме

Свяжитесь с администрацией

Наши специалисты готовы ответить на ваши вопросы

jQuery Черно-белое изображение из цветного на jQuery

Информация о теме

О теме Здравствуйте, вы читаете тему Черно-белое изображение из цветного на jQuery созданную в в разделе JavaScript пользователем impuLse #IT. Эта тема была просмотрена 1 659 раз(а), получила 0 комментариев и 0 очки реакции...
Название категории JavaScript
Название темы Черно-белое изображение из цветного на jQuery
Автор темы impuLse #IT
Дата начала
Ответы
Просмотры
Количество реакций
Последнее сообщение impuLse #IT

impuLse #IT

Администратор
Команда форума
Регистрация
12.03.2015
Сообщения
899
Реакции
446
Баллы
35
Лучшие ответы
0
  • Автор темы
  • Администратор
  • #1
В данной теме мы хотим предложить Вам скрипт, который при помощи библиотеки jQuery поможет Вам обесцветить нужное изображение, а при наведении на него курсора мышки, цвет его плавно вернется.

Данный скрипт хорош тем, что Вам не нужно иметь два изображения, которые будут меняться между собой. Данный скрипт сам создаст черно-белое изображение из предложенного цветного. Плюсом данного скрипта является то, что при наведении курсора мышки изображение плавно приобретает цветной (исходный) вид, а при потере фокуса - плавно обесцвечивается.

Как видите, выглядит эффект перехода от полноцветного изображения к изображению с оттенками серого, просто отлично.

Для работы данного скрипта, плавно преобразующего изображения в черно-белые и обратно, Вам потребуется подключить библиотеку jQuery следующим образом:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Далее Вам потребуются изображения, которые мы будем обесцвечивать. Т.к. предполагается, что скрипт чаще всего будет использоваться в каких-либо галереях, то все необходимые изображения следует поместить внутрь тега DIV:
HTML:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Обратите внимание, что тег DIV изначально скрыт - style="display:none;". Это нужно для того, чтобы пока скрипт загружается, на экране у пользователя не были видны изначальные цветные изображения. Как только вся страничка загрузится, и скрипт создаст черно-белые изображения из предложенных, то они сразу появятся на экране.

Далее, где-нибудь ближе к концу странички, вставьте скрипт, который и будет отвечать за преобразование цветного изображения в черно-белое и обратно:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Все, вот и весь код, в результате использования которого Вы без труда сможете обесцветить изображение и получить из него черно-белое изображение с оттенками серого.
 
Верх Низ