3

モバイル Web アプリケーションにZepto.jsを使用しています。Zepto にはswipe、 、swipeLeftなどの便利なメソッドが付属していswipeRightます。

例:swipeLeft左へのスワイプが完了すると、ジェスチャがトリガーされます。少なくとも私はそう見ています。

このスワイプジェスチャからライブ値で要素の位置を更新することは可能ですか?

そのため、ドキュメントをゆっくりと左にスワイプするときは、div.layer一緒にゆっくりと移動したいと考えています。重要なポイントに到達するlayerと、定義済みの位置にスナップする必要があります。

それはどういうわけか可能ですか？Zepto でそれが不可能な場合は、別のフレームワークを選択します。

私が今持っているもの

HTML

<div class="page-wrap">

    <section class="layer" id="one">

    </section>

    <section class="layer" id="two">

    </section>

</div>

CSS

.page-wrap {
    position:relative;
    width:100%;
    height:100%;
}

.page-wrap .layer {
    width:100%;
    height:100%;    
    position:absolute;
    top:0;
}   

.page-wrap #one {
    background:red;
}

.page-wrap #two {
    left:-100%;
    background:green;
}

JS

$(document).ready(function() {  
    $('#two').swipeRight(function(e) {
        showInfos(true);
    });

    $('#one').swipeLeft(function(e) {
        showInfos(false);
    });
});

function showInfos(show) {
    $("#two").animate({
        left: show?'0':'-100%'
    }, 200, 'ease-out');
}

これはうまくいきます！は.layer#two、表示されているビューポートの外側に配置されています。右にスワイプすると.layer#one、.layer#two左からスライドインします。左にスワイプすると、左に.layer#twoスライド.layer#twoして戻ります。

これは、まさに私がアプリケーションに実行させたいことです。このパターンはよく知られており、多くのアプリがこの UI パターンを使用しています。

しかし、私がやりたいことは、携帯電話のネイティブアプリケーションが、.layersに沿って指をスライドさせると、s.layerがユーザーの指に対する相対的な位置を更新するかのように動作することです。swipeそのため、ジェスチャーが完了したらアニメーションを有効にしたくありません。スワイプしながらライブ更新しpositionたい。.layer#two

たぶん、どこかでライブテストしたいでしょう。上記のスニペットをjsfiddleに提供しました。

これについて何か助けていただければ幸いです。またはヒントとコツ。このようなことに興味を持っているのは私だけではないかもしれません。

4

1 に答える 1

2

独自のタッチ イベント ハンドラの使用を検討してください: http://www.html5rocks.com/en/mobile/touch/

そのページから div をドラッグする例:

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is
    obj.style.left = touch.pageX + 'px';
    obj.style.top = touch.pageY + 'px';
  }
}, false);

それを更新して x 座標を変更するだけであれば、ほぼ完了です。

于 2012-10-11T10:44:02.643 に答える