Отображение горизонтальной прокрутки jQuery

Я делаю горизонтальный скроллер с помощью jQuery. У меня это работает, используя следующее

var wrapper = $('#wrapper'),
    content = $('#scroll-content');


wrapper.bind('mousemove', function(e){

    var wrapper_width = wrapper.width(),
        content_width = content.width();
        //wrapper and content width

    var tmp  = e.pageX * (content.outerWidth() - wrapper.outerWidth()) / wrapper.outerWidth();
    //calculate new left margin

    content.css({ 'margin-left': '-'+tmp+'px' });
    //set margin according

    /*content.animate({
        'margin-left': '-'+tmp+'px'
    }, 30, 'easeOutSine');*/
});

Каждое событие mousemove я вычисляю новое левое поле, ползунок занимает 100% ширины экрана.

Это работает, но у меня есть две проблемы. Кажется плохой практикой вызывать расчет для каждого события mousemove, поскольку их сотни. Есть ли лучший способ, может быть, с помощью таймеров?

Другой вопрос, когда пользователь сначала наводит ползунок, он встает на место, я пытался использовать анимацию, чтобы ползунок скользил вниз в правильное положение, но, похоже, это не сработало. (комментарии внизу)

любая помощь с этими проблемами будет здорово. Спасибо


animation jquery horizontal-scrolling
person michael    schedule 23.02.2011    source источник
comment
Какая желаемая анимация? Постоянный скролл или скролл по какому-то событию?   -  person Dustin Laine    schedule 24.02.2011
comment
вместо того, чтобы прыгать в правильную позицию, я просто хочу, чтобы она прокручивалась в правильную позицию, я создал скрипт здесь jsfiddle .net/letsgojuno/RkbP6   -  person michael    schedule 24.02.2011

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете использовать плагин Throttle Debounce Бена Алмана

А затем сделайте что-то вроде этого:

$(document).ready(function() {

    var wrapper = $('#wrapper'),
        content = $('#scroll-content');

    wrapper.bind('mouseenter mousemove', $.throttle(200, mousemove));

    function mousemove(e) {
        var wrapper_width = wrapper.outerWidth(),
            content_width = content.outerWidth();
        //calculate new left margin
        var tmp = e.pageX * (content_width - wrapper_width) / wrapper_width;

        content.stop().animate({
            'margin-left': '-' + tmp + 'px'
        }, 'fast', 'easeOutSine');
    }
});

Пример: http://jsfiddle.net/petersendidit/RkbP6/1/

person PetersenDidIt    schedule 24.02.2011
comment
круто, это именно то, что я искал, я знал, что уже видел плагин для дросселирования, просто не мог вспомнить, где. Спасибо, Петерсен. - person michael; 24.02.2011

arrow_upward
1
arrow_downward

Я знал, что видел нечто подобное с точки зрения дросселирования. Джон Резиг написал в блоге о проблемах с бесконечной прокруткой твиттера. Я использовал его решение в следующем.

Вот сообщение в блоге для всех, кто заинтересован.

http://ejohn.org/blog/learning-from-twitter/

$(document).ready(function() {

    var wrapper = $('#wrapper'),
        content = $('#scroll-content'),
        did_move = false,
        g_event;

    wrapper.bind('mouseenter mousemove', function(e) {
        did_move = true;
        g_event = e;
    });

    setInterval(function() {
        if (did_move) {
            did_move = false;
            //reset move bool
        }

        var wrapper_width = wrapper.outerWidth(),
            content_width = content.outerWidth();
            //update wrapper and content widths

        var tmp = g_event.pageX * (content_width - wrapper_width) / wrapper_width;
        //recalculate margin-left

        content.stop().animate({
            'margin-left': '-' + tmp + 'px'
        }, 'fast', 'easeOutSine');
        //animate into place.

    }, 150);
});
person michael    schedule 24.02.2011