JqueryMobile中的水平滚动和垂直滚动
我想用垂直滑动实现水平滚动。如下图所示。 
为了做同样的事情，我搜索并找到了这个http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html但是这篇博客中写的代码没有对我有意义。
我还下载了http://www.idangero.us/sliders/swiper/上提供的演示，并尝试根据我的需要进行修改。 但无法做到这一点。 如果任何人有想法或链接或演示项目，请帮助我。 问候！
更新
我做了一些重大修改，可以更好地控制触摸事件。 您现在可以设置X轴和Y轴的触摸持续时间 ， 距离和阈值的最小值/最大值。
此外，现在预先加载图像以使图像之间的过渡更平滑。
我已经根据触摸事件touchstart和touchend ，横向和纵向制作了这个相当复杂的代码。 代码捕获触摸事件，然后将它们解释为向上 ， 向右 ， 向下和向左滑动。
根据滑动的方向，图像与.animate()交换。 向上滑动并向左滑动，在arrays中加载下一个图像; 向下和向右加载以前的。
它有点冗长，并且有太多的增强空间。 例如，您可以计算touchstart和touchend两个事件之间经过的时间，以确保触摸足以触发自定义滑动。
我将通过代码的主要部分进行更多解释。
HTML
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; } -
转换包装 – 用于图像转换和转出 ：
.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，然后将它们附加到innerdiv，pageinit事件或任何其他jQM页面事件 。$(document).on("pageinit", "#gallery", function () { $.each(images, function (i, src) { $("").appendTo(".inner"); }); $(".inner .holder:first-child").toggleClass("visible hidden"); }); -
触摸事件解释 – 将触摸事件绑定到
innerdiv：触摸持续时间和距离被添加到比较中。
$(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：为动画添加了不透明度 。
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"); }); } } }
演示 （1）
（1）在iPad 2和iPhone 5上测试 - v7.0.4
我现在在工作，所以没有太多时间工作。 但创造了两个项目相结合的小东西。
将horizental滚动添加到第3页。
在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事情，但现在没有时间去做。 希望它可以帮助你。
您可以通过简单的CSS和一些DOM操作来实现这一点http://jsfiddle.net/zTGS9/1/
-
-
-
-
没时间实施触摸事件，但我希望你明白:)
您需要为body标签应用内联css。
body{ overflow-x:scroll; overflow-y:scroll; }
对于y滚动，请参阅此http://sigmamobility.com/examples/appexamples.jsp 。 请注意，除非您的控件确实是溢出窗口宽度/高度，否则上面的应用不会给出预期的结果。
您可以通过Sigma Mobility测试您的代码，它可以创建移动应用程序并轻松注入内联css / js代码以及实时预览。