Пример создания SlideUp скроллера с помощью jQuery
Понадобилось мне сделать эффект скроллирования списка с цикличным повтором элементов. Т.е. список как бы закольцован и закрыт от взгляда пользователя за исключением небольшой области, в которую видно несколько элементов списка. При этом область, видимая пользователю, должна двигаться над списком. Надеюсь реализация прояснит возможные вопросы от такой постановки задачи :)
Сразу понятно, что задачу без яваскрипта не решить. Ну а так как анимацию делать самостоятельно мне было лень, я решил воспользоваться своим любимым фреймворком - jQuery.
Начнем с заготовки html-страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>SlideUp Scroller example</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>Добавим список:
...
<body>
<div class="scroller">
<ul id="frame">
<li></li>
<li>Test block #1</li>
<li>Test block #2</li>
<li>Test block #3</li>
<li>Test block #4</li>
<li>Test block #5</li>
<li>Test block #6</li>
<li>Test block #7</li>
<li>Test block #8</li>
<li>Test block #9</li>
</ul>
</div>
</body>
...В стиле зададим высоту видимой части списка и высоту каждого элемента:
.scroller {
height: 150px;
overflow: hidden;
}
#frame {
margin-top: -30px;
}
li {
height: 30px;
line-height: 30px;
}У контейнера (DIV с классом “scroller”) я задал высоту 150 пикселей и установил свойство overflow в hidden для того, чтобы скрыть лишние элементы списка. А у самого списка я сделал отрицательный отступ сверху равный высоте одного элемента (кстати, в самом списке первым присутствует пустой элемент - ниже я объясню зачем). Высота строки для элемента задана просто для красоты.
А теперь перейдем к самому яваскрипту:
var topElementId = '0', t;
$(document).ready(function(){
var el =$('#frame').children();
// проверяем количество элементов в списке: если элементов больше
// чем вмещается в видимую область, то начинаем скролирование
if (el.size() > 6) {
// присваиваем каждому элементу списка свой ID
el.each(function(i){
$(this).attr('id','row'+i);
});
// запускаем таймер. число задает количество милисекунд между
// загрузкой страницы и началом скролирования
t = setTimeout('listSlideUp()', 3000);
}
});
function listSlideUp() {
// для самого верхнего элемента списка (не видимого на странице)
// вызываем функцию плавного уменьшения высоты
$('#row'+topElementId).slideUp(2000, function(){
// тут определяем кол-бэк функцию, выполняющуюся после завершения
// работы slideup
// если текущий элемент не вспомогательный,
// то переносим его в конец списка
if (topElementId > 0) {
// создаем копию верхнего элемента
var topElement = jQuery('#row'+topElementId).clone().show();
// убираем верхний элемент из списка
$('#row'+topElementId).remove();
// добавляем скопированный элемент в конец списка
$('#frame').append(topElement);
}
topElementId++;
// если номер верхнего элемента больше количества элементов,
// то сбрасываем его в 1
if (topElementId >= jQuery('#frame').children().size()) {
topElementId = 1;
}
});
// опять запускаем таймер
t = setTimeout('listSlideUp()', 4000);
}
Алгоритм работы скрипта очень прост. Через равные промежутки времени вызывается функция, которая плавно уменьшает высоту верхнего (невидимого) элемента до 0. После чего этот элемент переносится в конец списка и цикл повторяется снова.
У скрипта есть два недостатка: использование глобального пространства имен и необходимость фиксировать высоту элементов. Может у кого-нибудь возникнут идеи по устранению этих недостатков? Тогда велком в комментарии…
Для желающих посмотреть результат работы скрипта, я выложил архив со всем необходимым - код скрипта SlideUp-scroller (16кб)
Upd: У всем любимого (в плохом смысле слова…) ослика обнаружилась неприятная особенность - дерганье при слайдАп-эффекте на теге LI. Пришлось переделать на использование DIV-ов. Новый архив забираем тут: SlideUp-scroller (IE-bugfix)
PS: Прошу в комментариях отписаться о работе скрипта в различных браузерах.
Метки: java-script, jQuery, примеры, разработка
Работает с FireStats
марта 10, 2008 at 10:14
рекомендую посмотреть на jcarousel - плагин к jquery, который делает то же самое
марта 10, 2008 at 14:49
Спасибо за наводку, хотя на первый взгляд это не совсем то, что нужно. Посмотрю подробней и отпишусь.
марта 28, 2008 at 09:48
Пытался сам реализовать. Запнулся на том, что слайдап сворачивает блок снизу, т.е. визуально выглядит, что предыдущие блоки налазят на первый.
Спасибо за решение!
марта 28, 2008 at 10:41
Спасибо за благодарность. Я рад, что мое решение кому-то пригодилось.
марта 31, 2008 at 15:50
Теперь возникла задача реализовать эту фичу без фиксированной высоты блоков:)
апреля 1, 2008 at 13:21
это решение скроллера блоков с динамической высотой.
комменты к коду пока нет времени писать. кому не понятно, спрашивайте или пишите на darkside@i.ua
апреля 2, 2008 at 12:09
Интересное решение. Спасибо!
Я оформил Ваше решение в виде готового к употреблению архива. Кому интересно, забрать можно тут - slider-example-darkside.zip