使用CSS/JS在移動設備上創建滑動效果

Question

我需要實現的是，當您從箭頭向上滑動頁面時，頁面需要向上滑動，用戶將被重定向到另一個頁面（如介紹）。

我現在有使用滑塊上的工作方式：

問題是：實際上，我怎麼做，看起來像網頁的效果上升滑塊時用來？

Answer 1

您可以使用Hammer.js

var swipe = new Hammer.Swipe(); 
swipe.recognizeWith(swipeup); 

見swipe-recogniser。

因此，一旦您識別了向上滑動手勢，就可以使用css將div設置爲translate。

div { 
    -ms-transform: translate(50px,100px); /* IE 9 */ 
    -webkit-transform: translate(50px,100px); /* Safari */ 
    transform: translate(50px,100px); 
} 

參考this

Answer 2

有許多不同的方式來做到這一點。因爲我更喜歡做沒有插件（當然除了jQuery的），這裏是我的方式來實現這一目標：

1.檢測輕掃

這可以用「touchstart」和「touchend」事件來實現。如果touchstart事件被觸發，您將獲得觸摸位置的座標。當觸摸結束時，再次獲取並比較距離。

關於此主題有很多真正有用的文章。

here或here或只是谷歌「的JavaScript刷卡」

2.向下滾動

可以在許多不同的方式來完成，取決於你想要什麼樣的動畫。谷歌爲「平滑滾動JavaScript」。如果你使用jQuery，這可能是最簡單的方法：

function afterscrolling(){ 
     $('html, body').animate({ 
      scrollTop: $(YOUR_ELEMENT).offset().top 
     }, 500); 
     return false; 
}; 

Answer 3

發了Codepen http://codepen.io/keephacking/pen/RaYxpm
使用jQuery touchSwipe和slideUp jQuery中的作用
更多關於TouchSwipe，檢查下面的鏈接。 https://github.com/mattbryson/TouchSwipe-Jquery-Plugin