| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Перетаскивание фотографий по столу
|
|
Перетаскивание фотографий по столу
Создание реалистичного эффекта перетаскивания фотографий по столу.
Что мы имеем:
Фоновое изображение ввиде деревянного стола.
При загрузке стола каждая фотография, как бы "плавает" на нём.
Каждая фотография имеет случайное расположение и ориентацию - эффект "разбрасывания".
Фотографии имеют белую рамочку с тенью и слегка прозрачны.
После загрузки стола, фотки можно перетаскивать с помощью мыши.
Существует так-же уменьшенная версия мини стола. Подробнее об этом можно прочитать тут.
Загрузка jQuery библиотеки.
Эффект "обесцвечивания", когда фон стола загрузился.
Случайное позиционирование и вращение каждой фотки.
Создание эффекта перетаскивания.
"Плавающий" эффект по столу после его загрузки.
JAVASCRIPT:
По умолчанию пределяется темно-серый фон и шрифт. Так - же скрываем все полосы прокрутки. DIV содержит тег <img> - имя деревянного стола. Этот тег (img) нужен только для того, чтобы мы смогли прикрепить к нему загружаемое jquery событие, в тот момент, когда "деревянный" фон загрузится полностью. В нём мы не отображаем фотки, поэтому позиционируем его в крайнее левое положение в окне браузера, т.е. делаем его невидимым.
Установка в относительное положение, позволяет задать абсолютное позиционирование фотографий находящихся внутри этого DIV.Вокруг стола устанавливаем значение поля в 70px, чтобы фотки не вышли за его край.
И окончательно задаем margin: 0 auto для центрирования стола по горизонтали и создаем темную рамочку вокруг. Затем прячем его display: none.
Код CSS
Непосредственно сама jQuery бибиотека и плагин jQuery UI - реализующий эффект перетаскивания фоток draggable().
Первый фрагмент кода устанавливает различные переменные и обработчики событий для инициализации стола.
Использование переменной newImageZIndex позволяет установить каждой фотографии последовательно новый z-index при её загрузке, что гарантирует, что каждая последующая фотка будет расположена над уже загруженной.
Функция init() - java код запускается после того, как весь DOM загружен.
Настройка фотографий
Задача функции initPhotos() заключается в обесцвечивании стола, когда его изображение загрузится и затем обойти каждую фотку в DIV #lighttable и настроить их следующим образом:
Случайное позиционирование и поворот в области стола.
Эффект перетаскивания.
Изначально скрытие.
После фотка загружается с размера на 50% больше обычного и постепенно приходит к оригинальному размеру - создается впечатление плавного падения на стол.
JQUERY код:
Разметка HTML очень простая и состоит из двух частей:
Тег img для изображения деревянного стола заключен в DIV с id="wooden-table" .
В итоге это изображение, на самом деле, отображается как фон DIV с id="lighttable" .
Собственно сам DIV с id="lighttable" , содержащий 5 фоток, которые показываются на столе.
Листинг
<div id="wooden-table">
<img src="../image/wooden-table.jpg" alt="Изображение деревянного стола"></div>
<div id="lighttable">
<img src="../image/foto_1.jpg" alt="Bird Marking">
<img src="../image/foto_2.jpg" alt="Double Propellors">
<img src="../image/foto_3.jpg" alt="Moody Listener Satellite Dish">
<img src="../image/foto_4.jpg" alt="Orange Hatches">
<img src="../image/foto_5.jpg" alt="Plane Nose Closeup">
</div>
Предпросмотр
Скачать
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
