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

Horizontal scrolling and vertical scrolling in JqueryMobile

提问by Dinesh Chandra

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.htmlBut 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/提供的演示，并尝试根据我的需要进行修改。但不能做同样的事情。如果有人有想法或链接或演示项目，请帮助我。问候！

回答by Omar

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 thresholdfor both X and Y axis.

Moreover, images now are preloadedfor smoother transition between images.

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

此外，现在预加载图像以实现图像之间的平滑过渡。

---

---

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

我已经根据触摸事件和水平和垂直方向制作了这个相当复杂的代码。代码捕获触摸事件，然后将它们解释为向上、向右、向下和向左滑动。touchstarttouchend

Images are exchanged with .animate()according to swipe's direction. Swipe upand left, load next images in array; downand rightload previous ones.

.animate()根据滑动方向交换图像。向上和向左滑动，加载数组中的下一个图像；向下和向右加载以前的。

It is somehow lengthy, and have too much room of enhancement. For instance, you can calculate time elapsed between both events touchstartand touchendto 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

HTML

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

---

---

CSS

CSS

1. Wrapper - heightand widthshould 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 inand out:

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

4. Hide preloaded images:

   .hidden {
     display: none;
   }
   

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

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 holderand then append them to innerdiv, on pageinitevent 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 innerdiv:

   Touch durationand distanceare 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 opacityto 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");
               });
           }
       }
   }
   

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、on pageinitevent 或任何其他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");
               });
           }
       }
   }
   

---

---

Demo⁽¹⁾

演示⁽¹⁾

^{(1) Tested on iPad 2 and iPhone 5 - v7.0.4}

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

回答by Merijndk

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.

将水平滚动添加到第 3 页。

http://jsfiddle.net/BL33k/

http://jsfiddle.net/BL33k/

used some dutch in je javascript so:

在 je 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.

代码很脏，可能有很多无关紧要的东西，但现在没有时间去处理。希望对你有帮助。

回答by tnt-rox

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 :)

没有时间实现触摸事件，但我希望你能明白:)

回答by Mobile Dev Expert

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 代码以及实时预览。