0

jQueryまたはJavaScriptを介してタッチスクリーンデバイスにラウンドアバウトスタイルのスクロールを実装する方法を知っている人はいますか?スクロール/ドラッグすると、スクロールするとラウンドアバウトが回転しますか?

誰かが例をフックできますか?

4

3 に答える 3

2

「スワイプ」が開始するポイントをキャプチャし、その動きを追跡して、何をすべきかを判断できます。

$(document).on('vmousedown', function (event) {

    //the swipe has started, get the starting point saved for later
    $.data(this, 'swipe-start', { x : event.pageX, y : event.pageY });
}).on('vmouseup', function (event) {

    //set the swipe-start date to null to we can start anew,
    //this allows you to fire more than one control event with a single swipe,
    //so long swipes trigger more control events than short ones
    $.data(this, 'swipe-start', null);
}).on('vmousemove', function (event) {
    if ($.data(this, 'swipe-start') != null) {
        //here we can see how far the swipe has gone and in what direction
        var distanceX = $.data(this, 'swipe-start').x - event.pageX,
            distanceY = $.data(this, 'swipe-start').y - event.pageY,
            distanceT = Math.sqrt(Math.pow(Math.abs($.data(this, 'swipe-start').x - event.pageX), 2) + Math.pow(Math.abs($.data(this, 'swipe-start').y - event.pageY), 2));
    
        //let the user swipe at least 50 pixels before deciding what to do
        if (distanceT > 50) {
            if (distanceX > 0 && distanceY > 0) {
                //user went up and to the right
                $('.ui-content').append('<p>You went up/left</p>');
            } else if (distanceX < 0 && distanceY > 0) {
                //user went up and to the left
                $('.ui-content').append('<p>You went up/right</p>');
            } else if (distanceX < 0 && distanceY < 0) {
                //user went down and to the left
                $('.ui-content').append('<p>You went down/right</p>');
            } else {
                //user went down and to the right
                $('.ui-content').append('<p>You went down/left</p>');
            }
            //reset the 'swipe-start' incase the user keeps swiping
            $.data(this, 'swipe-start', { x : event.pageX, y : event.pageY });
        }
    }
});​

次に、適切なif/thenステートメント内に、UI要素を制御するコードを配置します。

vmousedown//は、マウス入力とタッチ入力で機能することを目的としたjQueryMobileカスタムイベントでvmouseupあることに注意してください。vmousemove

アップデート

上記のコードを少し更新してユーザーフレンドリーにしました。また、解決しなければならない問題がいくつかありました。動作するデモは次のとおりです：http：//jsfiddle.net/sRxFC/1/

勢いをつけたい場合は、方向だけでなく速度を決定するためにスワイプの速度も追跡する必要があることに注意してください。

于 2012-04-22T19:40:19.120 に答える
0

カスタムスクロールパスが必要な場合は、このjQueryプラグインが役立つかもしれません...スクロール中にラウンドアバウトを「単に」表示したい場合は、JSを介してスクロールイベントを観察し、CSSを介していくつかの遷移を行うことをお勧めします

または私はあなたを完全に誤解しましたか？

于 2012-04-22T19:39:22.070 に答える
0

jQuery プラグイン Roundabout を試しているときに、この質問に出くわしました。箱から出してすぐに使えるものが必要で、それが機能する場合は、このプラグインを強くお勧めします。これは、enableDrag プロパティを介してドラッグ/スワイプをサポートする機能です。これまでのところ、iOS デバイスでしかテストしていませんが、そこではうまく機能し、他のタッチ プラットフォームでも機能すると思います。

Roundabout プロジェクト ページと ドラッグ/スワイプを有効にする方法

于 2012-10-31T12:09:44.427 に答える