Эффект выпадающих сверху картинок.

В этом уроке мы рассмотрим создание эффекта выпадающих сверху картинок. Однако этот эффект можно использовать не только сверху страницы, но и в любом ее месте.

Чтобы посмотреть пример, нажмите на картинку ниже:

Шаг 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
Просмотров: 31402
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^