Меняющийся информационный блок на jQuery
Сегодня мы научимся делать меняющийся информационный блок на jQuery.
Пример работы этого блока Вы можете посмотреть здесь.
Шаг 1.
Скачаем и подключим необходимые скрипты. А именно скрипт jQuery 1.2.6.js и скрипт самого эффекта jQueryCycle.js. Для подключения нам необходимо разархивировать содержимое в папку scripts в корне сайта, а также вписать между тегами <hеad></hеad> следующий код:
<script type="text/javascript" src="scripts/jQuery 1.2.6.js"></script>
<script type="text/javascript" src="scripts/jQueryCycle.js"></script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;
$(function() {
$('td pre code').each(function() {
eval($(this).text());
});
});
</script>
Шаг 2.
Вставим в документ таблицу, с нужной нам шириной блока. В моем случае это 300 px.
<table width="300" border="0">
<tr>
<td>Здесь будет меняющийся информационный блок</td>
</tr>
</table>
Шаг 3.
Теперь вместо надписи из предыдущего шага вставим код скрипта:
<div id="s6">
<div>
Страница 1.
</div>
<div>
Страница 2.
</div>
<div>
Страница 3.
</div>
</div>
<pre><code class="mix">$('#s6').cycle({
fx: 'scrollUp',
timeout: 6000,
delay: -2000
});</code></pre>
Вместо слов "Страница 1, 2, 3" можете вставить любой текст, картинки, ссылки и т.п.
Изменяя параметр "fx:" на значения scrollUp, scrollDown, scrollRight, scrollLeft, можете добиться нужного направления анимации блока.
Значение timeout - это время задержки одного кадра в милисекундах. Его вы тоже можете изменять по своему усмотрению.
Шаг 4.
В таблице стилей создадим стиль для тега <pre>
PRE {
DISPLAY: none
}
Готово!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.malsup.com
Перевел: Сергей Патин
Урок создан: 9 Марта 2009
Просмотров: 62531
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.