Как реализовать бесконечный список?

Question

[megamutex]

Здравствуйте! Есть блок, в котором есть список, который в свою очередь каждую секунду сдвигается вниз на определенное кол-во пикселей. Вопрос: как сделать, чтобы список не закачивался, был бесконечным, т.е., чтобы "крутился бесконечно"?

Comments

[Дмитрий Беляев]

А откуда берутся данные для списка?

[megamutex]

bingo347: пока просто список в html

[mletov]

Это по принципу барабана в игровом автомате, т е когда список пролистывается до последнего элемента, то снизу снова начинают появляться первый элемент списка, второй и т д?

[mletov]

Еще вопрос: Пролистывание плавное или по пунктам, т е может быть внизу или вверху видна только половина элемента?

Answer 1

[Дмитрий Беляев]

Во-первых, реализация тут будет несколько отличаться в зависимости от верстки, а конкретно, если наш внешний блок имеет position == absolute || relative || fixed то задаем нашему листу position: absolute и работаем с его свойством top, в ином случае придется работать с свойством margin-top, что медленнее в отрисовке.

Собственно по реализации:
я допущу, что у Вас уже сохранен jQuery объект списка в переменной $list, что работаем мы все таки со свойством top и у Вас уже где-то есть таймер в котором это свойство top уменьшается, вот туда нужно будет добавить следующий код:

var $li = $list.find('li:eq(0)');
var h = $li.height();
var top = +$list.css('top');
if(top < -2 * h) { //если список поднялся больше чем на 2 высоты 1 элемента
    $li.remove().appendTo($list); //перемещаем элемент в конец списка
    $list.css('top', (top + h) + 'px'); //опускаем список на высоту элемента,
                         //так как мы его убрали вначале
}

Comments

[megamutex]

Здорово, работает. Только вот с каждой итерацией положение списка уменьшается, т.е. список поднимается вверх и в определенный момент список поднимается на столько, что уходит за пределы видимости

[Дмитрий Беляев]

Честно не тестил, тот код, что Вам написал.
Если обеспечивает необходимую плавность, попробуйте поменять числовые значения и подстроится под Ваш случай.
И еще вопрос, у вас top в какую сторону двигается в минус или в плюс?
И высота элементов списка у всех одинаковая?

[megamutex]

bingo347: да, разобрался. в этом месте var top = +$list.css('top'); Nan получался. Привел к целочисленному и все встало на свои места :) Спасибо, огромное

[megamutex]

bingo347: правда с рывками поднимается)

[Дмитрий Беляев]

megamutex: совсем забыл об этой особенности jQuery возвращать численные css свойства в виде '10px' ))
вместо преобразования по + нужно parseInt или parseFloat

[megamutex]

bingo347: да, так и сделал. решить бы еще проблемы "рывков"

[Дмитрий Беляев]

megamutex: посмотреть бы пример полностью, тогда можно было бы и с рывками что-нибудь придумать

[Дмитрий Беляев]

megamutex: так же еще можете посмотреть в сторону тега marquee, хотя этот тег не входит в спецификацию w3c, его вроде нормально отображают все браузеры

Answer 2

[Александр Мельниченко]

Тебе нужно блок который ушел вверх с области видимости перемещать вниз блока.
Что то на подобии такого $('#list li:eq(0)').appendTo($('#list'));
Он ищет в списке первый элемент и перемещает его в конец

Comments

[megamutex]

а как можно отловить момент, когда элемент ушел за область?

[Александр Мельниченко]

У тебя как я понял прокрутка идет на один элемент списка вверх. Вот ты и переноси самый верхний элемент списка вниз после каждой такой операции. То есть ты заведомо уже знаешь что он скрыт. Как то так:)

[megamutex]

alex87melnichenko: да, попробовал, есть бесконечность) только когда элемент переставляется, происходит это рывками. Может можно как-то сгладить переставление?

[Александр Мельниченко]

$('#list li:eq(0)').hide().appendTo($('#list')).fadeIn();
Попробуй так

[megamutex]

alex87melnichenko: неа, все равно рывками(. видимо, из-за того, что когда элемент появляется, то его "каркас" появляется сразу, а потом то, что внутри

[Александр Мельниченко]

ну да, так и есть. Используй тогда вместо .fadeIn() - slideDown()

Answer 3

[mletov]

М б стоит посмотреть в Гугл по запросу "Jquery вертикальный слайдер"
Например, ruseller.com/adds/adds2223/example