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

Question

我想实现垂直滑动的水平滚动.如下图所示.

为了做同样的事情,我搜索并找到了这个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轴的触摸持续时间,距离和阈值的最小值/最大值.

此外,现在预先加载图像以使图像之间的过渡更平滑.

我根据触摸事件以及水平和垂直方式制作了相当复杂的代码.代码捕获触摸事件,然后将它们解释为向上,向右,向下和向左滑动.touchstarttouchend

.animate()根据滑动的方向交换图像.向上滑动并向左滑动,在阵列中加载下一个图像; 向下和向右加载以前的.

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

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

HTML

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

CSS

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

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

2. 内包装 - 将图像附加到:

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

3. 过渡包装-用于图像转换中和了:

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

4. 隐藏预装图像:

   .hidden {
     display: none;
   }
   

JS

1. 变量和默认值:

   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 */
   

2. 预加载图片:

   将每一个包装进去holder,然后将它们附加到innerdiv,pageinit事件或任何其他jQM页面事件.

   $(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");
   });
   

3. 触摸事件解释 - 将触摸事件绑定到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");
         }
       }
   });
   

4. 过渡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");
               });
           }
       }
   }
   

演示 ⁽¹⁾

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