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語句中您將控制你的UI元素的代碼。

請注意，vmousedown/vmouseup/vmousemove是jQuery Mobile自定義事件，旨在用於鼠標和觸摸輸入。

更新

我更新了上面的代碼有點更人性化，也有一對夫婦的問題，我不得不鍛鍊。這裏是一個工作演示：http://jsfiddle.net/sRxFC/1/

請注意，如果你想涉及動量，你還需要跟蹤滑動的速度來確定速度，而不僅僅是方向。

Answer 2

如果你想定製scrollpaths然後this jQuery plugin可以幫助你......如果你「只是」想顯示迂迴一會兒，然後滾動我會建議觀察通過JS的滾動事件，並通過CSS做一些轉變

還是我完全誤解了你？

Answer 3

我在試用jQuery插件環形交叉口時遇到了這個問題。如果你想要的東西近在眼前，它只是起作用，我強烈推薦插件，並且它可以通過enableDrag屬性支持拖/刷。我只在iOS設備上進行了測試，但它在那裏效果很好，我想它可以在其他觸摸平臺上使用。

Roundabout Project Page和 How to enable Drag/Swipe