прокрутка прокрутки jQuery окольный

Question

Кто-нибудь знает о том, как я применил бы прокрутку стиля кругового движения для устройств с сенсорным экраном через jQuery или JavaScript, поэтому, если я прокручу/перетащил круговую крутку, когда я прокручу?

Может ли кто-нибудь подключить пример?

Answer 1

Вы можете захватить точку, где «коромысло» начинает затем отслеживать его движение, чтобы определить, что делать:

$(document).on('vmousedown', function (event) { 

    //the swipe has started, get the starting point saved for later 
    $.data(this, 'swipe-start', { x : event.pageX, y : event.pageY }); 
}).on('vmouseup', function (event) { 

    //set the swipe-start date to null to we can start anew, 
    //this allows you to fire more than one control event with a single swipe, 
    //so long swipes trigger more control events than short ones 
    $.data(this, 'swipe-start', null); 
}).on('vmousemove', function (event) { 
    if ($.data(this, 'swipe-start') != null) { 
     //here we can see how far the swipe has gone and in what direction 
     var distanceX = $.data(this, 'swipe-start').x - event.pageX, 
      distanceY = $.data(this, 'swipe-start').y - event.pageY, 
      distanceT = Math.sqrt(Math.pow(Math.abs($.data(this, 'swipe-start').x - event.pageX), 2) + Math.pow(Math.abs($.data(this, 'swipe-start').y - event.pageY), 2)); 

     //let the user swipe at least 50 pixels before deciding what to do 
     if (distanceT > 50) { 
      if (distanceX > 0 && distanceY > 0) { 
       //user went up and to the right 
       $('.ui-content').append('<p>You went up/left</p>'); 
      } else if (distanceX < 0 && distanceY > 0) { 
       //user went up and to the left 
       $('.ui-content').append('<p>You went up/right</p>'); 
      } else if (distanceX < 0 && distanceY < 0) { 
       //user went down and to the left 
       $('.ui-content').append('<p>You went down/right</p>'); 
      } else { 
       //user went down and to the right 
       $('.ui-content').append('<p>You went down/left</p>'); 
      } 
      //reset the 'swipe-start' incase the user keeps swiping 
      $.data(this, 'swipe-start', { x : event.pageX, y : event.pageY }); 
     } 
    } 
});​ 

Затем в правильном if/then заявления вы поместите код, который управляет вашим элементом пользовательского интерфейса.

Обратите внимание, что vmousedown/vmouseup/vmousemove jQuery Мобильные пользовательские события, предназначенные для работы с мышью и сенсорным вводом.

обновление

Я обновил приведенный выше код немного, чтобы быть более удобным, а также была пара вопросов, которые я должен был работать-аут. Ниже приведена рабочая демонстрация: http://jsfiddle.net/sRxFC/1/

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

Answer 2

если вы хотите пользовательские scrollpaths то this jQuery plugin может помочь вам ... если вы «просто» хотят, чтобы показать карусель во время прокрутки, то я хотел бы предложить, чтобы наблюдать событие прокрутки с помощью JS и сделать несколько переходов через CSS

или я полностью вас неправильно понял?

Answer 3

Я столкнулся с этим вопросом, пытаясь подключить плагин jQuery Roundabout. Если вы хотите что-то, что близко к коробке, и это просто работает, я бы настоятельно рекомендовал плагин и его способность поддерживать drag/swipe через свойство enableDrag. Я тестировал только на устройствах iOS, но там хорошо работает, и я думаю, что он будет работать на других сенсорных платформах.

Roundabout Project Page и How to enable Drag/Swipe