1

もっと画像があります。プロジェクトでこれらの画像を上にスワイプして下にスワイプする機能が必要です。たとえば、iPhone で画像を上にスワイプすると、画像が上に移動し、新しい画像が下から表示されます。その逆も同様です。

jQuery Mobile を使用してこれを行うにはどうすればよいですか? 以下は左右にスワイプするコードですが、このように上下にスワイプする必要があります。誰でも私を助けて

<style>
    .clip {
        height:250px;
        width:150px;

        overflow: hidden;
    }
    .pan {
        width: 400%;
        -o-transition: -o-transform 2s;
        -moz-transition: -moz-transform 2s;
        -webkit-transition: -webkit-transform 2s;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }
    .pan img {
        display: block;
        float: left;
        width: 25%;
        -moz-user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }
</style>

<script>

var 位置 = 0;

    function next() {
        position -= 25;
        if (position <= -100)
            position = 0;
        update();
    }

    function prev() {
        position += 25;
        if (position > 0)
            position = 0;
        update();
    }

    function update() {
        var pan = document.getElementById("pan");
        pan.style.OTransform = "translateX(" + position + "%)";
        pan.style.MozTransform = "translateX(" + position + "%)";
        pan.style.WebkitTransform = "translateX(" + position + "%)";
    }


    $(function() {

        $(window).bind("swipeleft", next);
        $(window).bind("swiperight", prev);
        $(window).bind("keydown", function(event) {
            if (event.which==38)
                prev();
            else if (event.which==40)
                next();
        });
        $("img").bind("dragstart", function(ev) { ev.preventDefault(); });
    });


        <div class="clip">
            <div id="pan" class="pan">
                <img src="images/logo.jpg" />
                <img src="images/53-house.png" />
                <img src="images/bg-blue.png" />
              <img src="images/bg-sandal.png" />
            </div>
        </div>
4

1 に答える 1

0

Jquery Mobile はスワイプアップ / スワイプダウンをサポートしていません。このプラグインを試してください: https://github.com/blackdynamo/jquerymobile-swipeupdown

于 2014-01-16T18:27:47.747 に答える