Горизонтальная прокрутка и вертикальная прокрутка в JqueryMobile

Я хочу реализовать горизонтальную прокрутку с вертикальным скольжением. Что-то вроде изображения, приведенного ниже.

Для того же поиска я нашел и нашел этот http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html Но код, написанный в этом блоге, для меня не имеет смысла.

Я также загрузил демонстрацию, представленную в http://www.idangero.us/sliders/swiper/, и попытался изменить ее в соответствии с моей потребностью. Но он не мог сделать то же самое. Если у кого-то есть идея или линг или демонстрационный проект, пожалуйста, помогите мне. Привет!

Ответ 1

Update

Я сделал некоторые важные изменения, которые дают больший контроль над событиями касания. Теперь вы можете установить минимальные/максимальные значения продолжительности касания, расстояния и порога для оси X и Y.

Кроме того, изображения теперь предварительно загружены для более плавного перехода между изображениями.

Я сделал этот довольно сложный код, основанный на событиях касания touchstart и touchend, по горизонтали и вертикали. Код ловит события касания, а затем интерпретирует их в порядке, вправо, вниз и влево.

Изображения обмениваются с .animate() в соответствии с направлением движения. Проведите вверх и влево, загрузите следующие изображения в массив; вниз и правая загрузка предыдущих.

Он как-то длинный и имеет слишком много возможностей для улучшения. Например, вы можете рассчитать время, прошедшее между обоими событиями touchstart и touchhend, чтобы убедиться, что прикосновение было достаточно для запуска пользовательских проверок.

Я рассмотрю основные части кода для получения дополнительных пояснений.

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;
}
```

JS

Переменные и значения по умолчанию:

var total = images.length - 1, /* images total number */
    current = 0,               /* image 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 */

Предварительная загрузка изображений:

Оберните каждый в 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");
});

Синхронизация сенсорных событий - привязка событий Touch к inner 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", ".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");
      }
    }
});

Функция перехода 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");
            });
        }
    }
}

Демо ⁽¹⁾

^{(1) Протестировано на iPad 2 и iPhone 5 - v7.0.4}

Ответ 2

Я сейчас работаю, поэтому у меня не было много времени на работу. но создал небольшую вещь из двух проектов.

добавлена горизонтальная прокрутка на стр. 3.

http://jsfiddle.net/BL33k/

использовал некоторый голландский в j javascript, поэтому:

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

Код очень грязный, и может быть много unessecery вещей, но у нас нет времени, чтобы пройти через это сейчас. Надеюсь, вам это поможет.

Ответ 3

Вы можете добиться этого с помощью простого 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>

Нет времени для реализации событий касания, но я надеюсь, что вы получите идею:)

Ответ 4

Вам нужно применить встроенный css для тега body.

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

для прокрутки y, см. http://sigmamobility.com/examples/appexamples.jsp. обратите внимание, что применение выше не даст намеченных результатов, если только ваши элементы управления действительно не превышают ширину/высоту окна.

Вы можете протестировать свой код через Sigma Mobility, который позволяет создавать мобильные приложения и легко вводить встроенный код css/js вместе с предварительным просмотром в режиме реального времени.