html - 在 iPad 中通过滑动导航到其他页面(通过 HTML5、CSS3 和 JS)(带有幻灯片动画)

Question

我正在开发一个主要只能在 iPad 上打开的网站(使用 HTML5、CSS3 和 JS)。

我想实现将当前页面重定向到其他页面的滑动 Action 。

我设法通过 padilicious 使用以下 JS 实现了这一点:-

if ( swipeDirection == 'left' ) {
    window.location.href = 'other.html';
}

这有效，但动画不存在；滑动时，新页面就会加载。我希望当我滑动旧页面时，它会在新页面滑入(或加载)之前随着我的手指移动。

有什么帮助吗？

谢谢。

Answer 1

为此，您需要将所有页面放在一个 HTML 文档中，然后将每个“页面”放在一个 div 中。这样，当您滑动时，它会以动画形式显示页面 curl 效果，并在其下方显示 div。否则您无法为其设置动画，因为您无法开始显示未加载的页面等。

这是一个演示 http://www.jqueryrain.com/?9yQO5MGv

<div id="exemple1">
    <div><img src="img/img1.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img1.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img2.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img2.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img3.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img3.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img4.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img4.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img5.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img5.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img6.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img6.jpg" style="margin-left: -250px;" /></div>
</div>
<div>
    <a href="#" onclick="$('#exemple1').trigger('previous'); return false;">Previous</a>
     - 
    <a href="#" onclick="javascript:$('#exemple1').trigger('next'); return false;">Next</a>
</div>

<script>
    $('#exemple1').flippage({
        width: 500,
        height: 333
    });
</script>

您可以将 img 替换为您的页面内容，并将边距样式分配给内部 div。