jQuery цикл - управление с помощью колесика мыши? (Как предотвратить непрерывное вращение колесика мыши?) - PullRequest
Новая
       41

jQuery цикл - управление с помощью колесика мыши? (Как предотвратить непрерывное вращение колесика мыши?)

3 голосов
/ 28 марта 2012

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

Есть ли какой-нибудь способ остановить событие на мгновение после его запуска каждый раз?

Я создал JSBIN:

http://jsbin.com/evaxas/10

РЕДАКТИРОВАТЬ: Исправлена ​​проблема с колесом мыши, теперь он работает предыдущий / следующий

-

РЕДАКТИРОВАТЬ: С помощью r0m4n ниже, мне удалось найти хорошее решение. Ответ ниже хорош, но создает небольшую задержку перед вызовом прокрутки, поэтому я решил создать функцию, которую можно связать и отскочить.

http://jsbin.com/evaxas/13/

function wheelMove(event,deltaY) {
  event.preventDefault();
  $('#cycle').unbind('mousewheel', wheelMove);

  if (deltaY > 0) {
    $('#cycle').cycle('next');
  }
  if (deltaY < 0) {
    $('#cycle').cycle('prev');
  }
}

$(document).ready(function(){
  $('#cycle').cycle({
    fx: 'scrollVert',
    speed: 800,
    timeout: 0,
    after: function(){
      interval = setTimeout(function(){
        $('#cycle').bind('mousewheel', wheelMove);
      },1600);
    }
  });

  $('#cycle').bind('mousewheel',wheelMove);
});

Ответы [ 2 ]

2 голосов
/ 29 марта 2012

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

Это может потребовать дополнительных настроек времени, чтобы быть полностью усовершенствованным, но попробуйте это js: 

if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}

$(document).ready(function(){
    $('#cycle').cycle({
        fx: 'scrollVert'
    });

    var interval = "";
    $('#cycle').mousewheel(function(event, delta, deltaX, deltaY) {
        var o = '';
        clearTimeout(interval);
        if (deltaY > 0){                
            interval = setTimeout(function(){
                $('#cycle').cycle('next');
            },400);
        }
        else if (deltaY < 0){
            interval = setTimeout(function(){
                $('#cycle').cycle('prev');
            },400);
        }   
        //console.log(' pageY: ' + event.pageY );
    });  
});
0 голосов
/ 15 июня 2016

Этот код может помочь. Я использую рефракционный период (1 секунда), прежде чем снова могу катиться (Замените #slider на #cycle ID) 

$('#slider').on("cycle-after",function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    // période réfractionnaire
    setTimeout(function(){ 
        $(outgoingSlideEl).removeClass('moving');
    },1000);
});

$('#slider').mousewheel(function(event, delta, deltaX, deltaY) {
    var slide = $('.cycle-slide-active');
    if($('.moving').size()==0 && slide.size()==1) {

        if(slide.css('left')=='0px' && slide.css('visibility')=='visible' && !slide.hasClass('moving')) {
            slide.addClass('moving');
            if (deltaY > 0){     
               $('#slider').cycle('next');
            }
            else if (deltaY < 0){
                $('#slider').cycle('prev');
            }   
        }
    }


});
...