Отражение изображения с помощью jQuery

отражение изображений

От автора: всем, наверное, известно о новой, не кросбраузерной технологии canvas… C помощью этой технологии можно вытворять немыслимые вещи, например красиво отразить картинку.
Я изучаю эту технологию, но пока применять её рано, думаю как реализовать подобные эффекты, используя доступные инструменты каждому браузеру.

Что касается отражения картинки, мне это удалось.

результат

скачать исходникидемо

Задача

Нам необходимо реализовать скрипт, который будет находить нужное нам изображение и вставлять в его родителя отражение, причём не просто такую же картинку, а с градиентной прозрачностью. Ну и понятное дело – картинка должна быть зеркальна по вертикали.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Таких картинок должно быть несколько.

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

Метод

Файлы и вёрстка

Найдём, подберём изображения и вырежем для них превью.

Для работы скрипта, нужно создать несколько "img" картинок в виде превью, каждая из которых будет находиться в объекте с заданным классом. Например, в ссылке "a" с классом ".img".

Спозиционируем горизонтально и стилизуем наши ссылки с картинками.

Исходный план DOM

исходный план DOM

Javascript

Скрипт должен посчитать количество объектов с классом «img» и в соответствии с результатом запустить цикл добавления отражений.

Опираясь на порядковый номер объекта с классом «img», скрипт узнаёт ссылку на изображение по атрибуту src картинки внутри этого объекта, а также узнаёт его ширину и высоту. Вставляет в текущий объект с классом "img" div с классом "ref", сразу после картинки. Затем запускается цикл по вставке фрагмента в виде div, с шириной как у картинки высотой в 50 раз меньше чем у картинки. У созданного фрагмента задаётся фон по ссылке, полученной из src, и задвигается в зависимости от этапа цикла. Созданный div .ref отражается по вертикали.

План DOM результата работы скрипта

план DOM

Анимация

При наведении курсора на изображение, скрипт сдвигает его вверх а его отражение вниз, делая его более прозрачным. При уходе курсора с изображения, скрипт возвращает всё в исходное положение.

Решение

Изображения

Для демонстрации я выбрал обои для рабочего стола на тему Ubuntu и сделал уменьшенные копии с высотой 100 пикселей.

HTML

Все картинки обязательно должны находиться в своём объекте с классом img. В моём случае это ссылка на большую картинку – оригинал.

Не забывайте присоединять файлы скриптов и стилей.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

CSS стили

Изучая стили, обратите внимание на позиционирование объектов.

Ещё вы заметите, что в описании стилей класса «img» указан нулевой размер шрифта, хотя мы ничего там писать и не собираемся. Смысл в том, что IE увеличивал заданную высоту фрагмента, до размера потенциального текста и отражение было по меньшей мере не красивым…

А эта строчка этот баг ликвидирует.

У нас получается вот такая картина:

Javascript

Вот момент создания объекта, ему присваиваются стили, обратите на них внимание.

Опа!

Результат:

результат

Примечание

IE как всегда работает криво, на этот раз с событием "load()". Поэтому с локальных директорий вашего компьютера, скрипт работать не будет. Но в принципе это и не нужно, так как с сервера всё работает отлично.

Применяете и модернизируйте!

Ваши вопросы и отзывы жду в комментариях

С уважением Михаил Беляев.

Автор: Михаил Беляев.

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (28)