Плагин Coverflow для JQuery-Mobile

Question

Я ищу что-то вроде this, чтобы использовать его в приложении JQuery Mobile/Phonegap. Картинки в галерее должны быть изменены, прокручивая влево/вправо. Все плагины, которые я нашел до сих пор, либо не созданы для мобильных устройств, либо не имеют такого яблочного типа, как стиль покрытия.

Answer 1

Не знаю никаких готовых плагинов для этого, но на самом деле это очень просто построить с нуля с помощью CSS3 & Javascript - Вы даже можете получить аппаратное ускорение на устройствах iOS.

В принципе, вы хотите сделать 3 вещи:

1. Настройка основной сенсорный/коромысло обработчик события. Что-то вроде этого - хорошая отправная точка (возможно, требуется настройка - функция getMovement, безусловно, не самый лучший способ справиться с обнаружением событий салфетки. Вам также нужно будет настроить некоторые значения по умолчанию для ваших параметров, если они пустые ... На самом деле, вам, вероятно, лучше заменить их объектом «options», поэтому вам не нужно это делать).
   Он также реализует webkitAnimationEnd & webkitTransitionEnd (примечания: эти события имеют разные названия в Fennec, если вы планируете поддерживать этот браузер) слушателей, чтобы обнаружить, когда ваши CSS3 анимацию/переходы закончили, так что вы можете Подвод обратного вызова события для запуска как только ваши анимации сделаны:

   function TouchHandler(elem, tStart, tEnd, sLFunc, sRFunc, aFunc, trFunc) { 
       //Members 
       this.element = elem; 
       this.animations = 0; 
       this.transitions = 0; 
   
       //Callbacks 
       this.touchStart = tStart; 
       this.touched = tFunc; 
       this.swipeLeft = sLFunc; 
       this.swipeRight = sRFunc; 
       this.transitioned = trFunc; 
       this.animated = aFunc; 
   
       //Event Listners 
       if (window.Touch) this.element.addEventListener('touchstart', this, false); 
       this.element.addEventListener('webkitAnimationEnd', this, false); 
       this.element.addEventListener('webkitTransitionEnd', this, false); 
   } 
   
   //Methods 
   TouchHandler.prototype = { 
       handleEvent: function (e) { 
        switch (e.type) { 
         case 'touchstart': this.onTouchStart(e); break; 
         case 'touchmove': this.onTouchMove(e); break; 
         case 'touchend': this.onTouchEnd(e); break; 
         case 'webkitAnimationEnd': this.onAnimEnd(e); break; 
         case 'webkitTransitionEnd': this.onTransEnd(e); break; 
        } 
       }, 
       onTouchStart: function (e) { 
        e.preventDefault(); 
        this.touchStart(); 
        this.moved = false; 
        this.startX = event.touches[0].pageX; 
        this.startY = event.touches[0].pageY; 
        this.element.className += ' touched'; 
        console.log('touched! ' + this.element.className); 
        this.element.addEventListener('touchmove', this, false); 
        this.element.addEventListener('touchend', this, false); 
       }, 
       onTouchMove: function (e) { 
        if (this.animations == 0) { 
         this.moved = true; 
         this.changeInX = event.touches[0].pageX; 
         this.changeInY = event.touches[0].pageY; 
        } 
       }, 
       onTouchEnd: function (e) { 
        this.element.removeEventListener('touchmove', this, false); 
        this.element.removeEventListener('touchend', this, false); 
        if (this.element.className.search('touched') >= 0) { this.element.className = this.element.className.replace(' touched', ''); } 
        console.log('untouched! ' + this.element.className); 
        if (this.animations == 0 && this.transitions == 0) { 
         if (!this.moved) { 
          this.touched(); 
         } else { 
          if (this.getMovement() == 'imprecise') { 
           this.touched(); 
          } 
          if (this.getMovement() == 'swipeLeft') { 
           this.swipeLeft(); 
          } 
          if (this.getMovement() == 'swipeRight') { 
           this.swipeRight(); 
          } 
         } 
        } 
       }, 
       onAnimEnd: function (e) { 
        if (this.animations > 0) { 
         this.animations -= 1; 
         if (this.animations == 0) { 
          this.animated(); 
         } 
        } 
       }, 
       onTransEnd: function (e) { 
        if (this.transitions > 0) { 
         this.transitions -= 1; 
         if (this.transitions == 0) { 
          this.transitioned(); 
         } 
        } 
       }, 
       getMovement: function() { 
        var diffY = this.startY - this.changeInY; 
        var diffX = this.startX - this.changeInX; 
        var impreciseTouch = (diffX < 30 || diffX > -30) && (diffY > -30 || diffY < 30); 
        var swipeLeft  = diffX > 60 && (diffY > -30 || diffY < 30); 
        var swipeRight  = diffX < -60 && (diffY > -30 || diffY < 30); 
   
        if (impreciseTouch) { return 'imprecise'; } 
        else if (swipeLeft) { return 'swipeLeft'; } 
        else if (swipeRight){ return 'swipeRight'; } 
       } 
   }; 
   

2. в вашем CSS, установка ваши элементы изображения с позиции абсолютных, так что они не влияют на другие элементы страницы при обработке их (важно для производительности, так как мы будем стараться чтобы избежать срабатывания переполнения страниц в максимально возможной степени). Также обязательно установите -webkit-transform-style (и -moz-transform-style, если вы хотите поддержать Fennec) до preserve-3d - это позволит вашим внутренним слоям сохранить свое место в 3space вместо искусственного сглаживания браузером. Мы будем использовать css3 translate3d & rotateY to move & Поворот элементов изображения при прохождении пользователем. Используя 3dTransforms, мы также активируем аппаратное ускорение в iOS-браузерах. Теперь настройте переход css3 для каждой видимой позиции, в которой может находиться фотография. На основе вашего изображения у вас есть 5 позиций. Давайте назовем их prev2, prev1, current, next1, next2. Каждая фотография должна также иметь класс .photo, который мы будем использовать для установки в свойствах переходов Ex:

   .photo-container {-webkit-transform-style:preserve-3d;} 
   .prev2 {-webkit-transform: translate3d(0px,0,0) rotateY(-45deg);} 
   .prev1 {-webkit-transform: translate3d(200px,0,0) rotateY(-30deg);} 
   .current {-webkit-transform: translate3d(400px,0,0) rotateY(-45deg);} 
   .next1 {-webkit-transform: translate3d(600px,0,0) rotateY(-30deg);} 
   .next2 {-webkit-transform: translate3d(800px,0,0) rotateY(-45deg);} 
   
   .photo{ 
       -webkit-transition: -webkit-transform 500ms ease-in-out; 
   } 
   

3. экземпляр объекта touchHandler & привязать его к любому элементу DOM вы хотите, чтобы слушать ваши события прикосновения. Он должен быть родителем элементов, которые переходят для оживления событий анимации. Вы также можете создавать экземпляры каждой отдельной фотографии, но в зависимости от вашей настройки результаты будут отличаться. Возможно, вам захочется проверить обе настройки. В основном, когда запускается swipeLeft, вы хотите удалить класс .current из текущей фотографии. & добавить класс .next (используя javascript/jquery) - записать это в функцию и передать ее в параметры touchHandler при создании экземпляра. Это может быть неорганизованным, поэтому, вероятно, было бы лучше расширить класс (или написать другой класс, который наследуется от него), чтобы программно обрабатывать ваши фотопереходы. В идеале, вы должны хранить элементы DOM, представляющие фотографии в массиве & манипулировать элементы, используя this.array [I], итеративно ...

Надеются, что это все имеет смысл для вас ...