1 
var maxTime = 100000, // allow movement if < 1000 ms (1 sec)
maxDistance = 50,  // swipe movement of 50 pixels triggers the swipe
target = $('#gallery ul'),
startX = 0,
startTime = 0,
touch = "ontouchend" in document,
startEvent = (touch) ? 'touchstart' : 'mousedown',
moveEvent = (touch) ? 'touchmove' : 'mousemove',
endEvent = (touch) ? 'touchend' : 'mouseup';
target.bind(startEvent, function(e){
  e.preventDefault();
  // prevent image drag (Firefox)
  startTime = e.timeStamp;
  startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).bind(moveEvent, function(e){
  e.preventDefault();
  var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
    currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
    // allow if movement < 1 sec
  currentTime = e.timeStamp;
  if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
    if (currentX < startX) {
      galleryNext();
    }
    if (currentX > startX) {
      galleryPrev();
    }
    startTime = 0;
    startX = 0;
  }
}).bind(endEvent, function(e){
  startTime = 0;
  startX = 0;
});

これは、スクロール要素内の次の画像に切り替える機能を実行するように修正したスクリプトです。私がする必要があるのは、iPhone ギャラリーと同じように操作することです。要素を動かすと指で要素がスクロールし、離すと次の画像に移動するか、タッチエンド イベントで現在の画像が表示されます。イベント間で機能を切り替え、自然なスクロールを可能にするために preventDefault を削除してから、機能を適用しようとしましたが、これにより要素が通常どおり継続的にスクロールできるようになりましたが、これは私が望むものではありません。

誰でも助けることができますか？前もって感謝します。

4

0 に答える 0