Question

我有更多图像，我需要在我的项目中向上滑动并向下滑动这些图像的功能。例如，在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 position = 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>

Answer 1

Jquery Mobile不支持swipeup / swipeown。试试这个插件：https://github.com/blackdynamo/jquerymobile-swipeupdown

jquery手机上下滑动

1 个答案: