JqueryMobile 中的水平滚动和垂直滚动 [英] Horizontal scrolling and vertical scrolling in JqueryMobile

查看：13
本文介绍了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() 交换图像.向上和向左滑动，加载数组中的下一张图片；向下和向右加载以前的.

不知何故冗长，并且有太多的改进空间.例如，您可以计算 touchstart 和 touchend 两个事件之间经过的时间，以确保触摸足以触发自定义滑动.

我将通读代码的主要部分以获得更多解释.

HTML

<div类=内部"><!-- 图像放在这里-->

CSS

  1. Wrapper - height 和 width 应根据您的需要进行调整:

    .wrapper {溢出:隐藏；位置:相对；高度:200px；宽度:400px；边距:0 自动；}

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

    .inner {高度:200px；宽度:自动；位置:绝对；左:0；空白:nowrap；}

  3. 过渡包装器 - 用于图像过渡 in 和 out:

    .holder, .in, .hidden {位置:绝对；}

  4. 隐藏预加载的图像:

    .hidden {显示:无；}

JS

  1. 变量和默认值:

    var total = images.length - 1,/* 图片总数 */current = 0,/* 图片索引 */startX = '',/* 触摸开始 X 坐标 */startY = '',/* 触摸起始 Y 坐标 */endX = '',/* touchend X 坐标 */endY = '';/* 触摸结束 Y 坐标 */swipeDuration = 1000,/* 最大触摸持续时间 */swipeDistanceX = 50,/* X轴最小触摸距离*/swipeDistanceY = 50,/* Y轴最小触摸距离*/thresholdX = 30,/* X 轴最大触摸位移 */阈值Y = 30；/* Y轴最大触摸位移*/

  2. 预加载图片:

    将每个包裹在 holder 中，然后将它们附加到 inner div、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. Touch 事件解释 - 将 Touch 事件绑定到 inner div:

    触摸持续时间和距离被添加到比较中.

    $(document).on("touchstart", ".inner", function (e, ui) {startX = e.originalEvent.touches[0].pageX;startY = e.originalEvent.touches[0].pageY;开始 = 新日期().getTime();/* 触摸开始 */}).on("touchmove", ".inner", function (e, ui) {/* 防止页面滚动 */e.preventDefault();}).on("touchend", ".inner", function (e, ui) {endX = e.originalEvent.changedTouches[0].pageX;endY = e.originalEvent.changedTouches[0].pageY;end = new Date().getTime();/* 触摸结束 */如果((结束 - 开始)

  4. Transition showImg(image index, swipe type) 函数:

    为动画添加了不透明度.

    function showImg(index, type) {如果(类型==左"){当前 = 指数；如果(当前> = 0&&&&&&&&&&&&&&&<总){当前++；var distance = $(.visible").width();$(".inner .holder").eq(current).css({左:距离}).toggleClass(隐藏");$(".visible").animate({左:-"+ 距离 + px"，不透明度:0}, 600, 函数 () {$(this).toggleClass("visible hidden").css({顶部:自动"，左:自动"});});$(".in").animate({左:0，不透明度:1}, 500, 函数 () {$(this).toggleClass(可见");});}}如果(类型==向上"){当前 = 指数；如果(当前> = 0&&&&&&&&&&&&&&&<总){当前++；var distance = $(.visible").height();$(".inner .holder").eq(current).css({顶部:距离+px"}).toggleClass(隐藏");$(".visible").animate({顶部:-"+ 距离 + px"，不透明度:0}, 600, 函数 () {$(this).toggleClass("visible hidden").css({顶部:自动"，左:自动"});});$(".in").animate({顶部:0，不透明度:1}, 500, 函数 () {$(this).toggleClass(可见");});}}如果(类型==正确"){当前 = 指数；如果(当前> 0&&&&&&&&&&&&< =总计){当前的 - ;var distance = $(.visible").width();$(".inner .holder").eq(current).css({左:-"+ 距离 + px"}).toggleClass(隐藏");$(".visible").animate({左:距离+px"，不透明度:0}, 600, 函数 () {$(this).toggleClass("visible hidden").css({顶部:自动"，左:自动"});});$(".in").animate({左:0，不透明度:1}, 500, 函数 () {$(this).toggleClass(可见");});}}如果(类型==向下"){当前 = 指数；如果(当前> 0&&&&&&&&&&&&< =总计){当前的 - ;var distance = $(.holder").height();$(".inner .holder").eq(current).css({顶部:-"+ 距离 + px"}).toggleClass(隐藏");$(".visible").animate({顶部:距离+px"，不透明度:0}, 600, 函数 () {$(this).toggleClass("visible hidden").css({顶部:自动"，左:自动"});});$(".in").animate({顶部:0，不透明度:1}, 500, 函数 () {$(this).toggleClass(可见");});}}}

<块引用>

演示 (1)

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

I want to implement horizontal scrolling with vertical sliding .Something like picture given below.

For doing the same I search and found this one http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html But the code written in this blog does not make sense to me.

I also downloaded the demo provided at http://www.idangero.us/sliders/swiper/ and try to modified according to my need. But could not able to do the same. If any one have Idea or link or demo project then please help me. Regards!

解决方案

Update

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.

I have made this rather complicated code based on touch events touchstart and touchend, horizontally and vertically. The code catches touch events and then interpret them into swipe up, right, down and left.

Images are exchanged with .animate() according to swipe's direction. Swipe up and left, load next images in array; down and right load previous ones.

It is somehow lengthy, and have too much room of enhancement. For instance, you can calculate time elapsed between both events touchstart and touchend to ensure that the touch was sufficient enough to trigger custom swipes.

I'll go through code's main parts for more explanation.

HTML

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

CSS

  1. Wrapper - height and width should be adjusted to your need:

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

  2. Inner wrapper - To append images to:

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

  3. Transition wrappers - Used for images transition in and out:

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

  4. Hide preloaded images:

    .hidden {
  display: none;
}

JS

  1. Variables and defaults:

    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. Preload images:

    Wrap each one in holder and then append them to inner div, on pageinit event or any other 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");
});

  3. Touch events interpretation - bind Touch events to inner div:

    Touch duration and distance are added to comparison.

    $(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. Transition showImg(image index, swipe type) function:

    Added opacity to animation.

    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) Tested on iPad 2 and iPhone 5 - v7.0.4

这篇关于JqueryMobile 中的水平滚动和垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆