3

多数の iPhone アプリケーションで見た効果をエミュレートしようとしています。ボタンがクリックされると、基本的に画面上のコンテンツが右から左にスライドします。元の画面のコンテンツは左にスライドして見えなくなり、次の画面のコンテンツは右から中央にスライドして表示されます。

私は本質的にこれをjQueryでエミュレートできました。このフィドルを参照してください。これは正常に機能しますが、アニメーションがより複雑になると (つまり、元の画面に戻るためのボタンを追加したり、2 つ以上の画面がある場合)、この方法は非常に複雑になり、混乱を招きます。この効果を達成するためのより効率的な方法があると確信していますが、私はそれを知りません。誰かが私にヒントを与えることができますか？Web を検索しましたが、何も見つからなかったため、検索に正しい用語を使用しているとは思えません。私のコードを以下に示します。

HTML:

<div id="screen1">
    <div id="header">Screen 1</div>
</div>

<div id="screen2">
    <div id="header">Screen 2</div>
</div>

<a href="#" id="button">Swipe</a>

CSS:

body, html {
    width: 100%;
    height: 100%;
}

#screen1 {
    background: blue;
    width: 100%;
    height: 100%;
    position: fixed;
}

#header {
    height: 50px;
    width: 100%;
    background: red;
}

#screen2 {
    background: green;
    width: 0px;
    height: 100%;
    position: fixed;
    right: 0;
}

jQuery:

$('#button').click(function(){
    $('#screen1').animate({width: '0px'});
    $('#screen2').animate({width: '100%'});
});

JS フィドルの例

4

2 に答える 2

2

複数の画面で作業する簡単な方法は、すべての画面を配列に保存し、現在の画面を覚えておくことです。

このフィドルを見てください：http://jsfiddle.net/9C9yf/4/

私の最初のアドバイスは、幅をアニメーション化するのではなく（配置が台無しになります）、画面の左の位置をアニメーション化することです（私はそれらを に設定しましたabsolute）。

次に、ロード時に、すべての画面が にある必要がありますtop : 0; left : 100%。

次に、DOM ready でこのコードを呼び出します。

var arrScreen = new Array();

$('.screen').each(function(){
   arrScreen.push($(this));
})

var currentScreen = 0;

arrScreen[currentScreen].css('left', '0%');

これにより、ページ数が保存され、最初のページが表示されます。

その後、スワイプ アクションを変更する必要があります。このコードは現在、一方の側で機能しますが、もう一方の側をアニメーション化する方法が見つかると確信しています。

$('.button').click(function(){
    if(currentScreen < arrScreen.length){
        currentScreen++;
        arrScreen[currentScreen].animate({'left' : '0%'});
    }
});

基本的に、最後のページにいないかどうかを確認し、次の要素の左位置をアニメーション化します。

前のページに移動したい場合は注意してください。animateleftプロパティは 100% になります。

于 2013-05-19T21:13:55.600 に答える