更新

Question

我想实现垂直滑动的水平滚动。如下图所示。 enter image description here

为了做同样的事情，我搜索并找到了这个http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html 但是这篇博客中写的代码对我来说没有意义。

我还下载了http://www.idangero.us/sliders/swiper/提供的演示版，并尝试根据我的需要进行修改。但无法做同样的事情。如果任何人有想法或链接或演示项目，请帮助我。此致！

Answer 1

更新

我做了一些重大修改，可以更好地控制触摸事件。您现在可以为X轴和Y轴设置触摸持续时间，距离和阈值的最小/最大值。

此外，图像现在预加载，以便在图像之间实现更平滑的过渡。

我已根据触摸事件touchstart和touchend横向和纵向制作了相当复杂的代码。代码捕获触摸事件，然后将它们解释为滑动向上，向右，向下和向左。

根据滑动的方向，图像与.animate()交换。向上向上，向左，在数组中加载下一张图片; down 和 right 加载以前的

。

~~它有点冗长，并且有太多的增强空间。例如，您可以计算两个事件 touchstart 和 touchend 之间经过的时间，以确保触摸足以触发自定义滑动。~~

我将通过代码的主要部分进行更多解释。

HTML

<div class="wrapper">
  <div class="inner">
    <!-- images go here -->
   </div>
</div>

CSS

包装 - 高度和宽度应根据您的需要进行调整：

.wrapper {
  overflow: hidden;
  position: relative;
  height: 200px;
  width: 400px;
  margin: 0 auto;
}

内包装 - 将图像附加到：

.inner {
  height: 200px;
  width: auto;
  position: absolute;
  left: 0;
  white-space: nowrap;
}

转换包装 - 用于中的图像转换和 out ：

.holder, .in, .hidden {
  position: absolute;
}

隐藏预装图片：
```
.hidden {
  display: none;
}
```

JS

变量和默认值：

var total = images.length - 1, /* images total number */
    current = 0,               /* image's index */
    startX = '',               /* touchstart X coordinate */ 
    startY = '',               /* touchstart Y coordinate */
    endX = '',                 /* touchend X coordinate */
    endY = '';                 /* touchend Y coordinate */
    swipeDuration = 1000,      /* max touch duration */
    swipeDistanceX = 50,       /* X-axis min touch distance */
    swipeDistanceY = 50,       /* Y-axis min touch distance */
    thresholdX = 30,           /* X-axis max touch displacement */
    thresholdY = 30;           /* Y-axis max touch displacement */

预加载图片：

将holder中的每一个包裹起来，然后将其附加到inner div，pageinit个事件或任何其他jQM page events上。

$(document).on("pageinit", "#gallery", function () {
    $.each(images, function (i, src) {
        $("<div class='holder hidden'><img src=" + src + " /></div>").appendTo(".inner");
    });
    $(".inner .holder:first-child").toggleClass("visible hidden");
});

触摸事件解释 - 将触摸事件绑定到inner div：

触摸持续时间并添加距离进行比较。

$(document).on("touchstart", ".inner", function (e, ui) {
    startX = e.originalEvent.touches[0].pageX;
    startY = e.originalEvent.touches[0].pageY;
    start = new Date().getTime(); /* touch start */
}).on("touchmove", ".inner", function (e, ui) {

    /* prevent page from scrolling */
    e.preventDefault();

}).on("touchend", ".inner", function (e, ui) {
    endX = e.originalEvent.changedTouches[0].pageX;
    endY = e.originalEvent.changedTouches[0].pageY;
    end = new Date().getTime(); /* touch end */
    if ((end - start) < swipeDuration) {
      if (startX > endX && Math.abs(startY - endY) <= thresholdY && Math.abs(startX - endX) >= swipeDistanceX) {
        showImg(current, "left");
      } else if (startX < endX && Math.abs(startY - endY) <= thresholdY && Math.abs(startX - endX) >= swipeDistanceX) {
         showImg(current, "right");
      } else if (startY > endY && Math.abs(startX - endX) <= thresholdX && Math.abs(startY - endY) >= swipeDistanceY) {
        showImg(current, "up");
      } else if (startY < endY && Math.abs(startX - endX) <= thresholdX && Math.abs(startY - endY) >= swipeDistanceY) {
        showImg(current, "down");
      }
    }
});

转换showImg(image index, swipe type)功能：

为动画添加了不透明度。

function showImg(index, type) {
    if (type == "left") {
        current = index;
        if (current >= 0 && current < total) {
            current++;
            var distance = $(".visible").width();
            $(".inner .holder").eq(current).css({
                left: distance
            }).toggleClass("in hidden");

            $(".visible").animate({
                left: "-" + distance + "px",
                opacity: 0
            }, 600, function () {
                $(this).toggleClass("visible hidden").css({
                    top: "auto",
                    left: "auto"
                });
            });

            $(".in").animate({
                left: 0,
                opacity: 1
            }, 500, function () {
                $(this).toggleClass("in visible");
            });
        }
    }

    if (type == "up") {
        current = index;
        if (current >= 0 && current < total) {
            current++;
            var distance = $(".visible").height();
            $(".inner .holder").eq(current).css({
                top: distance + "px"
            }).toggleClass("in hidden");

            $(".visible").animate({
                top: "-" + distance + "px",
                opacity: 0
            }, 600, function () {
                $(this).toggleClass("visible hidden").css({
                    top: "auto",
                    left: "auto"
                });
            });

            $(".in").animate({
                top: 0,
                opacity: 1
            }, 500, function () {
                $(this).toggleClass("in visible");
            });
        }
    }

    if (type == "right") {
        current = index;
        if (current > 0 && current <= total) {
            current--;
            var distance = $(".visible").width();
            $(".inner .holder").eq(current).css({
                left: "-" + distance + "px"
            }).toggleClass("in hidden");

            $(".visible").animate({
                left: distance + "px",
                opacity: 0
            }, 600, function () {
                $(this).toggleClass("visible hidden").css({
                    top: "auto",
                    left: "auto"
                });
            });

            $(".in").animate({
                left: 0,
                opacity: 1
            }, 500, function () {
                $(this).toggleClass("in visible");
            });
        }
    }

    if (type == "down") {
        current = index;
        if (current > 0 && current <= total) {
            current--;
            var distance = $(".holder").height();
            $(".inner .holder").eq(current).css({
                top: "-" + distance + "px"
            }).toggleClass("in hidden");

            $(".visible").animate({
                top: distance + "px",
                opacity: 0
            }, 600, function () {
                $(this).toggleClass("visible hidden").css({
                    top: "auto",
                    left: "auto"
                });
            });

            $(".in").animate({
                top: 0,
                opacity: 1
            }, 500, function () {
                $(this).toggleClass("in visible");
            });
        }
    }
}

Demo ^（1）

^{（1）在iPad 2和iPhone 5上测试 - v7.0.4}

Answer 2

我目前正在上班，所以没有多少时间工作。但创造了两个项目的小东西。

将horizental滚动添加到第3页。

http://jsfiddle.net/BL33k/

在javascript中使用了一些荷兰语：

var slideAantal = slides.length; //means slidetotal
var slideBreedte = screen.width; //means slidewidth
var beeldHoogte  = screen.height; //means slideheight
var slideHuidig  = 0; //means currentslide

代码非常脏，可能会有很多unessecery的东西，但现在没有时间去做。希望它可以帮助你。

Answer 3

您可以使用简单的CSS和一些DOM操作来实现这一点http://jsfiddle.net/zTGS9/1/

<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        body {
            margin: 0;
        }
        div {
            width: 500px;
            overflow-x: hidden;
        }
        ul {
            list-style: none;
            width: 100%;
            padding: 0;
        }
        li {
            clear: both;
            white-space: nowrap;
            position: relative;
            height: 200px;
            width: 100%;
            overflow-x: hidden;
            padding: 0;
        }
        img {
            -webkit-transition: all 0.25s ease-out;
            -moz-transition: all 0.25s ease-out;
            -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
            position: absolute;
            display: block;
            top: 0;
        }
        img:nth-of-type(1) {
            left: -700px;
        }
        img:nth-of-type(2) {
            left: -300px;
        }
        img:nth-of-type(3) {
            left: 100px;
        }
        img:nth-of-type(4) {
            left: 500px;
        }
        img:nth-of-type(5) {
            left: 900px;
        }
        img:nth-of-type(6) {
            left: 1300px;
        }

    </style>
    <body>
        <div>
            <ul>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%201/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%202/"/>
                    <img src="http://lorempixel.com/400/200/business/image%203/"/>
                    <img src="http://lorempixel.com/400/200/food/image%204/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%205/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%206/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%202/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%203/"/>
                    <img src="http://lorempixel.com/400/200/business/image%204/"/>
                    <img src="http://lorempixel.com/400/200/food/image%205/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%206/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%207/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%204/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%205/"/>
                    <img src="http://lorempixel.com/400/200/business/image%206/"/>
                    <img src="http://lorempixel.com/400/200/food/image%207/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%208/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%209/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%209/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%208/"/>
                    <img src="http://lorempixel.com/400/200/business/image%207/"/>
                    <img src="http://lorempixel.com/400/200/food/image%206/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%205/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%204/"/>
                </li>
            </ul>
        </div>
    </body>
    <script>
       var _lis = document.getElementsByTagName('li');
for (var i = 0; i < _lis.length; ++i) {
    _lis[i].addEventListener('mousedown', function(e) {
        if (e.clientX < (this.offsetWidth >> 1)) {
            this.appendChild(this.removeChild(this.firstElementChild));
        } else {
            this.insertBefore(this.lastElementChild, this.firstElementChild);
           }
    });
}
    </script>
</html>

没时间实施触摸事件，但我希望你明白这一点：）

Answer 4

您需要为body标签应用内联css。

body{
    overflow-x:scroll;
    overflow-y:scroll;
}

对于y滚动，请参阅此http://sigmamobility.com/examples/appexamples.jsp。请注意，除非您的控件实际上是溢出窗口宽度/高度，否则上面的应用不会给出预期的结果。

您可以通过Sigma Mobility测试您的代码，它可以创建移动应用程序并轻松注入内联css / js代码以及实时预览。

JqueryMobile中的水平滚动和垂直滚动

4 个答案:

更新

HTML

CSS

JS