Блог

Я вижу, что есть несколько похожих вопросов, но я не могу правильно понять реализацию. Следовательно, я задаю этот вопрос конкретно для моего сценария.

У меня на веб-странице есть диаграмма jQuery flot. Существуют горизонтальные и вертикальные ползунки jQuery, которые я запрограммировал для перемещения диаграммы по горизонтали и вертикали. Теперь я хочу разместить кнопки со стрелками изображения (влево, вправо, сверху, снизу), которые должны позволять непрерывно прокручивать график при наведении курсора мыши до события наведения курсора мыши.

График должен непрерывно прокручивать фиксированные пиксели, скажем, каждые 0,5 секунды, когда кнопка наведения курсора мыши все еще там. Это должно прекратиться, как только произойдет наведение курсора мыши. Я не хочу использовать какой-либо плагин jQuery для достижения этого.

Кто-нибудь, пожалуйста, может помочь мне написать код для того же?

Во-первых, я предполагаю, что вы используете ползунок пользовательского интерфейса jQuery.

Для достижения вашего намерения есть 3 шага.

1. добавьте элементы изображения на страницу
2. добавьте прослушиватели событий к событиям наведения курсора мыши и наведения курсора мыши на этих элементах.
3. в каждом прослушивателе событий вызывайте value метод элемента slider jQueryUI.

Вам нужно будет сделать что-то подобное для шага 3

 //These two declared somewhere in scope for the remainder.
var animationHandler;
function slideLeft(){
    element.slider("value",element.slider("value")   1)
}


$(elem).mousedown(function(e){
    animationHandler = window.setInterval(slideLeft, 500);
});

$(elem).mouseup(function(e){
    window.clearInterval(animationHandler);
});
  

Затем, пока ваша текущая реализация привязана к событию slider change , все должно быть обработано.

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

Надеюсь, что это поможет!

Просто анимируйте параметр scrollTop с помощью

 $('#foobar').mousedown(function(){
    $('#foobar').animate({
        scrollTop: $('#foobar').height()
    });
});
  

при наведении курсора мыши. Затем при наведении курсора мыши сделайте это

 $('#foobar').mouseup(function(){
    $('#foobar').stop();
});
  

Это остановит анимацию прокрутки. Непроверено, но это должно сработать.