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

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.

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

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!

我还下载了http://www.idangero.us/sliders/swiper/上提供的演示,并尝试根据我的需要进行修改。但无法做到这一点。如果任何人有想法或链接或演示项目,请帮助我。问候!

4 个解决方案

#1

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.

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

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.

我已经根据触摸事件touchstart和touchend,横向和纵向制作了这个相当复杂的代码。代码捕获触摸事件,然后将它们解释为向上,向右,向下和向左滑动。

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.

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

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.

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

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.

   将每个包裹在持有者中,然后将它们附加到内部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 events interpretation - bind Touch events to inner div:

   触摸事件解释 - 将触摸事件绑定到内部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:

   转换showImg(图像索引,滑动类型)功能:

   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}

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

#2

I'm currently at work so didnt had much time to work somethnig out. but created a little thing of 2 projects combined.

我现在在工作,所以没有太多时间工作。但创造了两个项目相结合的小东西。

added the horizental scrolling to page 3.

将horizental滚动添加到第3页。

http://jsfiddle.net/BL33k/

used some dutch in je javascript so:

在javascript中使用了一些荷兰语,所以:

var slideAantal = slides.length; //means slidetotal
var slideBreedte = screen.width; //means slidewidth
var beeldHoogte  = screen.height; //means slideheight
var slideHuidig  = 0; //means currentslide

Code is very dirty and there might be a lot of unessecery things but dont have time to go trough that now. Hope it helps you tho.

代码非常脏,可能有很多unessecery事情,但现在没有时间去做。希望它可以帮助你。

#3

You can achieve this with simple CSS and some DOM manipulation http://jsfiddle.net/zTGS9/1/

您可以通过简单的CSS和一些DOM操作来实现这一点http://jsfiddle.net/zTGS9/1/

<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        body {
            margin: 0;
        }
        div {
            width: 500px;
            overflow-x: hidden;
        }
        ul {
            list-style: none;
            width: 100%;
            padding: 0;
        }
        li {
            clear: both;
            white-space: nowrap;
            position: relative;
            height: 200px;
            width: 100%;
            overflow-x: hidden;
            padding: 0;
        }
        img {
            -webkit-transition: all 0.25s ease-out;
            -moz-transition: all 0.25s ease-out;
            -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
            position: absolute;
            display: block;
            top: 0;
        }
        img:nth-of-type(1) {
            left: -700px;
        }
        img:nth-of-type(2) {
            left: -300px;
        }
        img:nth-of-type(3) {
            left: 100px;
        }
        img:nth-of-type(4) {
            left: 500px;
        }
        img:nth-of-type(5) {
            left: 900px;
        }
        img:nth-of-type(6) {
            left: 1300px;
        }

    </style>
    <body>
        <div>
            <ul>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%201/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%202/"/>
                    <img src="http://lorempixel.com/400/200/business/image%203/"/>
                    <img src="http://lorempixel.com/400/200/food/image%204/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%205/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%206/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%202/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%203/"/>
                    <img src="http://lorempixel.com/400/200/business/image%204/"/>
                    <img src="http://lorempixel.com/400/200/food/image%205/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%206/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%207/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%204/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%205/"/>
                    <img src="http://lorempixel.com/400/200/business/image%206/"/>
                    <img src="http://lorempixel.com/400/200/food/image%207/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%208/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%209/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%209/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%208/"/>
                    <img src="http://lorempixel.com/400/200/business/image%207/"/>
                    <img src="http://lorempixel.com/400/200/food/image%206/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%205/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%204/"/>
                </li>
            </ul>
        </div>
    </body>
    <script>
       var _lis = document.getElementsByTagName('li');
for (var i = 0; i < _lis.length; ++i) {
    _lis[i].addEventListener('mousedown', function(e) {
        if (e.clientX < (this.offsetWidth >> 1)) {
            this.appendChild(this.removeChild(this.firstElementChild));
        } else {
            this.insertBefore(this.lastElementChild, this.firstElementChild);
           }
    });
}
    </script>
</html>

No time to implement touch events, but I hope you get the idea :)

没时间实施触摸事件,但我希望你明白:)

#4

You need to apply inline css for body tag .

您需要为body标签应用内联css。

body{
    overflow-x:scroll;
    overflow-y:scroll;
}

for y scroll, see this http://sigmamobility.com/examples/appexamples.jsp. note that applying above wont give intended results unless your controls are really overflow window width / height.

对于y滚动,请参阅此http://sigmamobility.com/examples/appexamples.jsp。请注意,除非您的控件确实是溢出窗口宽度/高度,否则上面的应用不会给出预期的结果。

You can test your code through Sigma Mobility which enables creating mobile apps and easily inject inline css /js code along with real-time preview.

您可以通过Sigma Mobility测试您的代码,它可以创建移动应用程序并轻松注入内联css / js代码以及实时预览。