Прокрутка списка на кнопках (Margin)

Подробности

Опубликовано 08.10.2012 14:08

Есть несколько вариантов прокрутки, но все используют на изменение атрибут стилей. Прокрутка горизонтальная или вертикальная не имеет разницы. Изменение только входных и выходных параметров. При прокрутке как правило изменяют стиль margen, давайте рассмотрим этот вариант. Не забываем подключить jQuery.

Структура нашего списка:

<div class="block_lenta" style="height: 100px; overflow: hidden;">
    <ul class="lenta">
        <li>произвольный текст в списке 1</li>
        <li>произвольный текст в списке 2</li>
        <li>произвольный текст в списке 3, он может быть разной длины</li>
        <li>произвольный текст в списке 4</li>
        <li>произвольный текст в списке 5</li>
        <li>произвольный текст в списке 6, он может быть разной длины</li>
        <li>произвольный текст в списке 7</li>
        <li>произвольный текст в списке 8</li>
        <li>произвольный текст в списке 9, он может быть разной длины</li>
        <li>произвольный текст в списке 10</li>
    </ul>
</div>
<span id="up_lenta">кнопка вверх</span>
<span id="down_lenta">кнопка вниз</span>

Список у нас есть теперь получим данные для обсчета.

    var slideHeight = parseInt($('.block_lenta').css('height')); //высота видемой области
    var lentaMargin = parseInt($('.lenta').css('margin-top')); // отступ с верху списка, если он есть
    var lentaPosition = lentaMargin; // начальная позиция
    var lentaHeight = parseInt($('.lenta').css('height')); // Высота списка
    var lentaElements = parseInt($('.lenta li').length); // Колличество элементов
    var lentaStep = Math.round(lentaHeight / lentaElements); // Шаг прокрутки


Теперь сама функция по прокрутке списка:

function lentaSkrol(){
    lentaPosition = ($(this).attr('id') == 'up_lenta') ? //определяем какая кнопка была нажата
        (lentaPosition - lentaStep) : (lentaPosition + lentaStep); // Если ввнрх, то отнимаем (чтобы поднять), вниз пребовляем (чтобы опустить)
    $('.lenta').animate({'margin-top':(lentaPosition)}); // применяем новую позицию
    lentaActive(); // активируем действие кнопки
};


Теперь необходимо задействовать сами кнопки

 function lentaActive(){ //Проверяем на положение позиции списка и соответственно включаем или выключаем кнопки
    if(lentaPosition <= (slideHeight - lentaHeight)){
        if($("#up_lenta").hasClass("up_active")){
            $("#up_lenta").unbind("click", lentaSkrol).removeClass("up_active")};
    }else{
            if(!$("#up_lenta").hasClass("up_active"))
            $("#up_lenta").bind("click", lentaSkrol).addClass("up_active")
    };
                
    if(lentaPosition >= lentaMargin){
        if($("#down_lenta").hasClass("down_active")){
            $("#down_lenta").unbind("click", lentaSkrol).removeClass("down_active")};
    }else{
        if(!$("#down_lenta").hasClass("down_active"))
            $("#down_lenta").bind("click", lentaSkrol).addClass("down_active")
    };
};


Все эти действия необходимо выполнять после после загрузки страницы, поэтому необходимо все это вставить в:

$(document).ready(function(){
    var ....
    var ....
    function lentaSkrol(){.....};
    function lentaActive(){.....};
    lentaActive();
};


Теперь все. Пример для просмотра лежит здесь.