使用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或只是google“javascript swipe”

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中使用jQuery touchSwipe和slideUp来表示效果
有关TouchSwipe的更多信息，请查看下面的链接。 https://github.com/mattbryson/TouchSwipe-Jquery-Plugin