0

我正在开发一个主要只能在 iPad 上打开的网站（HTML5、CSS3 和 JS）。

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

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

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

这可行，但动画不存在；滑动时，新页面刚刚加载。我希望当我滑动旧页面时，它会在新页面滑入（或加载）之前用我的手指移动。

有什么帮助吗？

谢谢。

4

1 回答 1

2

为此，您需要一个 HTML 文档中的所有页面，然后将每个“页面”放在一个 div 中。这样，当您滑动它时，它会为页面卷曲效果设置动画，并在其下方显示 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。

于 2013-09-17T19:57:49.720 回答