JavaScript – 水平滚动和垂直滚动在JqueryMobile

我想用垂直滑动实现水平滚动,像下面给出的图片.

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

我也下载了http://www.idangero.us/sliders/swiper/提供的演示,并根据我的需要尝试修改.但是不能做同样的事情.
如果有任何人有Idea或Ling或演示项目,请帮助我.
问候！

解决方法

更新

I have made some major modification,which give more control over touch events. You can now set minimum/maximum values of touch duration,distance,and threshold for both X and Y axis.

Moreover,images now are preloaded for smoother transition between images.

我已经根据触摸事件touchstart和touchend,水平和垂直地制作了这个相当复杂的代码.代码捕获触摸事件,然后将其解释为向上,向右,向下和向左滑动.

图像根据滑动的方向与.animate()交换.向上和向下滑动,加载数组中的下一个图像;下载和右载入以前的.

不知何故,有太多的增强空间.例如,您可以计算两个事件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;
}

>转换包装 – 用于图像转换和转出：

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

>隐藏预加载图像：

.hidden {
  display: none;
}

>变量和默认值：

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

>预加载图像：

将每一个包裹在持有人中,然后将其附加到内部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");
});

>触摸事件解释 – 将触摸事件绑定到内部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",ui) {

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

}).on("touchend",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(图像索引,滑动类型)功能：

增加了动画不透明度.

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",left: "auto"
                });
            });

            $(".in").animate({
                top: 0,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",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",function () {
                $(this).toggleClass("in visible");
            });
        }
    }
}

07001 ⁽¹⁾

(1)在iPad 2和iPhone 5 – v7.0.4上测试

JavaScript – 水平滚动和垂直滚动在JqueryMobile

解决方法

猜你在找的jQuery相关文章