Jquery слайдер, который скользит при движении мыши - PullRequest
Новая
       38

Jquery слайдер, который скользит при движении мыши

1 голос
/ 07 января 2011

Я ищу скрипт слайдера jquery, который может скользить вправо-влево, пока я двигаю мышь. Кто-нибудь знает такой сценарий? Я хочу добиться эффекта, подобного этому , но его следует прокручивать по горизонтали, а не по вертикали.

1 Ответ

8 голосов
/ 07 января 2011

Ты имеешь в виду что-то подобное?Это очень простая вещь, которая использует jQuery UI Slider .Я присоединяю обработчик к событию mousemove, который просто вычисляет, какое значение должно быть для ползунка (на основе значения координат мыши). 

$(function() {

    var range = 100,
        sliderDiv = $("#slider");

    // Activate the UI slider
    sliderDiv.slider({
        min: 0,
        max: range
    });

    // Number of tick marks on slider
    var position = sliderDiv.position(),
        sliderWidth = sliderDiv.width(),
        minX = position.left,
        maxX = minX + sliderWidth,
        tickSize = sliderWidth / range;


    $(this).mousemove(function(e) {

        // If within the slider's width, follow it along
        if (e.pageX >= minX && e.pageX <= maxX) {
            var val = (e.pageX - minX) / tickSize;
            sliderDiv.slider("value", val);
        }

    });

});

Это не фантастический код, если честно, но этодает базовый пример того, как использовать ползунок jQuery UI и как установить значение с помощью кода.

Пример: http://jsfiddle.net/jonathon/qAMWQ/

...