Все для веб-дизайнера
Интересный вертикальный слайдер на jQuery
Слайдеры заполонили веб-дизайн, практически на каждом сайте можно найти расположение контента в слайдере, и это не удивительно, данные ротаторы помогаю существенно сэкономить место, и тем самым привлечь внимание пользователей. В основном слайдеры листают контент в горизонтальном положении, но чтобы выделиться мы предлагаем рассмотреть урок по созданию интересного вертикального слайдера с помощью jQuery. При нажатии мышкой на секции, слайдер раздвигается для вывода дополнительной информации.
При этом остальные секции становятся более прозрачными и сужаются. При навигации с помощью кнопок следующая секции сдвигается в основное положение. Также используется плагин jQuery Mousewheel (автор Brandon Aaron), который обеспечивает навигацию по слайдеру с помощью колесика мыши. Для начала нам необходимо подключить следующие скрипты:
|
1 2 3 4 |
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.vaccordion.js"></script> |
Данные скрипты отвечают за работу слайдера, анимацию и прокрутку с помощью мыши.
Следующим этапом будет создание разметики для слайдера, которая содержит общий контейнер, навигационные элементы и контенеры для каждого слайда:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id="va-accordion" class="va-container"> <div class="va-nav"> <span class="va-nav-prev">Назад</span> <span class="va-nav-next">Дальше</span> </div> <div class="va-wrapper"> <div class="va-slice va-slice-1"> <h3 class="va-title">Маркетинг</h3> <div class="va-content"> <p>Женя Ватсонов</p> <ul> <li><a href="#">Кто такой</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Контакт</a></li> </ul> </div> </div> <div class="va-slice va-slice-2"> . . . </div> </div> . . . </div> |
Для вызова плагина используем следующую команду:
|
1 2 3 4 5 6 |
$('#va-accordion').vaccordion({ expandedHeight : 350, animSpeed : 400, animOpacity : 0.7, visibleSlices : 2 }); |
Данный плагин легко редактировать, для этого плагин поддерживает следующие опции:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// ширина аккордеона accordionW : 1000, // высота аккордеона accordionH : 450, // количество видимых слайдов visibleSlices : 3, // высота открытого слайда, // не должна превышать высоты аккордеона expandedHeight : 350, // скорость открытия / закрытия слайда animSpeed : 250, // эффект, используемый при открытии / закрытии слайда animEasing : 'jswing', // значение непрозрачности для сжатых слайдов animOpacity : 0.2, // время затухания содержания слайда contentAnimSpeed: 900, // если данная опция имеет значение false, // все открытие слайды будут сворачиваться перед перемещением savePositions : true |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 29.04.2012 в 20:34, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...