javascript - 使用 CSS/JS 在移动设备上创建向上滑动效果

Question

我需要实现的是，当你从箭头向上滑动页面时，页面需要向上滑动，用户将被重定向到另一个页面(作为介绍)。

我目前有一种使用 slider 的工作方式:

问题是:当使用 slider 时，我如何实际制作一种看起来像页面上升的效果？

Answer 1

有很多不同的方法可以做到这一点。因为我更喜欢不使用插件(jQuery 除外)，所以这是我实现此目的的方法:

<强>1。检测滑动

这可以通过“touchstart”和“touchend”事件来实现。如果触发了 touchstart 事件，您将获得触摸位置的坐标。当触摸结束时，再次获取并比较距离。

关于这个主题有很多非常有用的文章。

here或 here或者只是谷歌“javascript swipe”

2.向下滚动

可以用很多不同的方式来完成，这取决于你想要什么样的动画。谷歌“平滑滚动的javascript”。如果您使用 jQuery，这可能是最简单的方法:

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