• Инструменты для разработчика

    • Самые удобные инструменты для разработчика, которые облегчат жизнь любого как начинающего так и продвинутого разработчика. Украшатели, уменьшители, конвертеры кодов. Доменные инструменты. Всё в одном комплекте.
  • Использование BB кодов. Тут указаны существующие BB коды на форуме.

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

impuLse #IT

Администратор
Команда форума
Регистрация
12.03.2015
Сообщения
915
Репутация
449
Баллы
104
Награды
2
Адрес
mySQL
Лучшие ответы
0
  • Супер постер
  • Постер
В данной теме мы хотим предложить Вам скрипт, который при помощи библиотеки jQuery поможет Вам обесцветить нужное изображение, а при наведении на него курсора мышки, цвет его плавно вернется.

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

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

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

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