- Метки урока:
- изображения
- jquery
- галерея
Эффект выпадающих сверху картинок.
В этом уроке мы рассмотрим создание эффекта выпадающих сверху картинок. Однако этот эффект можно использовать не только сверху страницы, но и в любом ее месте.
Чтобы посмотреть пример, нажмите на картинку ниже:
Шаг 1.
Скачаем и подключим необходимые для работы скрипты: jQuery, jQueryCyclePlugin и jQueryEasing.
<script type="text/javascript" src="jQuery1.2.6.js"></script>
<script type="text/javascript" src="jQueryCyclePlugin.js"></script>
<script type="text/javascript" src="jQueryEasing.js"></script>
Шаг 2.
Подготовим для работы картинки (в нашем случае их размер 360х166 px) или скачаем, используемые в примере.
В том месте, где мы хотим видеть этот блок, вставим следующий код:
<div style="position: absolute; width: 360px; height: 166px; left: 50px; top: 0px" id="fall">
<img src="1.jpg" alt="" width="360" height="166" />
<img src="2.jpg" alt="" width="360" height="166" />
<img src="3.jpg" alt="" width="360" height="166" />
<img src="4.jpg" alt="" width="360" height="166" />
</div>
Изменяя свойства тега div, можно добится необходимого месторасположения блока на странице. В данном случае он имеет отступ слева 50px и отступ сверху 0px.
Шаг 3.
Перед закрывающим тегом </body> вставим код скрипта:
<script type="text/javascript">
$('#fall').cycle({
fx: 'scrollDown',
speedIn: 2500,
speedOut: 30,
easeIn: 'bounceout',
easeOut: 'backin',
delay: -4000
});
</script>
Эффект готов! Надеюсь, он займет достойное место на Ваших сайтах.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Сергей Патин
Урок создан: 17 Апреля 2009
Просмотров: 31356
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.