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

查看：136 发布时间：2017/1/18 18:23:16 javascript jquery css html5 jquery-mobile

本文介绍了水平滚动和垂直滚动在JqueryMobile的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

我也下载了 http://www.idangero.us/sliders/swiper/ ，并尝试根据我的需要进行修改。但是不能做同样的事情。
如果任何一个有Idea或ling或演示项目，那么请帮助我。
谨慎！

解决方案

更新

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

此外，图片现在预加载，以便在图片之间顺利过渡。

我已根据触摸事件 touchstart 和 > touchend ，水平和垂直。该代码捕获触摸事件，然后将其解释为向上轻扫，向右，向下和向左。

根据滑动方向，与 .animate（）交换图像。向上滑动和左，加载数组中的下一张图片; 向下和向右加载前一个。

~~增强。例如，您可以计算 touchstart 和 touchend 之间的时间间隔，以确保触摸足以触发自定义滑动。~~

HTML

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

CSS

b $ b

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

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

内包装 - 要附加图片到：

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

转换包装器 - em>和 out ：

  .holder，.in，.hidden {
 ：绝对
}

隐藏预先载入的图片：
```
  .hidden {
 display：none; 
} 
  
```

JS

变量和默认值：

  var total = images.length  -  1，/ *图像总数* / 
 current = 0，/ *图像索引* / 
 startX = / * touchstart X坐标* / 
 startY =''，/ * touchstart Y坐标* / 
 endX =''，/ * touchend X坐标* / 
 endY ='' / * touchend Y坐标* / 
 swipeDuration = 1000，/ * max touch duration * / 
 swipeDistanceX = 50，/ * X轴最小触摸距离* / 
 swipeDistanceY = 50， Y轴最小触摸距离* / 
 thresholdX = 30，/ * X轴最大触摸位移* / 
 thresholdY = 30; / * Y轴最大触摸位移* /

预加载图片：

将 holder 中的每一个包起来，然后将它们附加到 inner div pageinit 活动或任何其他 jQM网页活动。

  $（document）.on（pageinit，#gallery，function（）{
 $ .each ，function（i，src）{
 $（< div class ='holder hidden'>< img src =+ src +/>< / div& .inner）; 
}）; 
 $（。inner .holder：first-child）toggleClass（visible hidden）; 
}

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

触摸持续时间和距离
$ b

  $（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）{
 
 / *防止页面滚动* / 
 e.preventDefault b 
}）。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&&剩下）; 
} else if（startX< endX&&& amp;&&&&&&& Math.abs（startY  -  endY）< = thresholdY&&& displayImg（current，right）; 
} else if（startY> endY&&& amp;&&&&&&& Math.abs（startX- endX）< = thresholdX&&& showImg（current，up）; 
} else if（startY< endY&&& Math.abs（startX-endX）< = thresholdX&&&& showImg（current，down）; 
} 
} 
}）;

转换 showImg（图片索引，滑动类型） 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 
}）。 
 
 $（。visible）。animate（{
 left： - + distance +px，
 opacity：0 
} 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 
 
 $（。visible）。animate（{
 top： - + distance +px，
 opacity：0 
} 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 ）; 
 
 $（。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 ）; 
 
 $（。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）; 
}）; 
} 
} 
}

b $ b

演示 ^（1）

^{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 ling 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

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

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

Inner wrapper - To append images to:

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

Transition wrappers - Used for images transition in and out:
```
.holder, .in, .hidden {
  position: absolute;
}
```
Hide preloaded images:
```
.hidden {
  display: none;
}
```

JS

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

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

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

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

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

查看全文

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

问题描述

更新

HTML

CSS

JS

Update

HTML

CSS

JS

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

更新

HTML

CSS

JS

Update

HTML

CSS

JS

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭