0

私は、主に iPad でのみ開く Web サイト (HTML5、CSS3、および JS) に取り組んでいます。

現在のページを他のページにリダイレクトするスワイプの動きを実装したいと考えています。

私は次の JS で padilicious を介してこれを実装することができました:-

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

これは機能しますが、アニメーションは存在しません。スワイプすると、新しいページが読み込まれます。古いページをスワイプすると、新しいページがスライド (またはロード) される前に指で移動することを望んでいます。

何か援助はありますか？

ありがとう。

4

1 に答える 1

2

これを行うには、すべてのページを 1 つの 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 に答える