使用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