javascript - JQuery-Mobile 的 Coverflow 插件

Question

我正在寻找像 this 这样的东西在 JQuery Mobile/Phonegap 应用程序中使用它。图库中的图片应该可以通过向左/向右滑动来更改。到目前为止，我发现的所有插件要么不是为移动设备设计的，要么没有这种苹果式的 coverflow 风格。

Answer 1

不知道有任何开箱即用的插件，但使用 CSS3 和 Javascript 从头开始​​构建它实际上非常简单 - 您甚至可以在 iOS 设备上获得硬件加速。

基本上，你想做三件事:

1. 设置基本的触摸/滑动事件处理程序。这样的事情是一个很好的起点(可能需要调整 - “getMovement”函数绝对不是处理检测滑动事件的最佳方式。您还需要为参数设置一些默认值，以防它们为空......实际上，您最好将它们替换为“选项”对象，因此您不需要这样做)。
   它还实现了 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 在用户滑动时移动和旋转图像元素。通过使用 3dTransforms，我们还在 iOS 浏览器中激活了硬件加速。现在，为照片可以出现的每个可见位置设置一个 css3 转换。根据您的图像，您有 5 个位置。让我们称它们为 prev2、prev1、current、next1、next2。每张照片还应该有一个类 .photo，我们将使用它来设置过渡属性 例如:

   .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 对象并将其绑定(bind)到您想要监听触摸事件的任何 DOM 元素。它必须是正在过渡的元素的父级，以便动画事件冒泡。您还可以实例化每张照片，但根据您的设置，结果会有所不同。您可能想要测试这两种设置。基本上，当 swipeLeft 触发时，您想从当前照片中删除 .current 类并添加一个 .next 类(使用 javascript/jquery)——将其写入一个函数中，并在实例化时将其传递给 touchHandler 的参数。这可能是无组织的，因此最好扩展该类(或编写另一个继承自它的类)以编程方式处理您的照片转换。理想情况下，您可以将表示照片的 DOM 元素存储在一个数组中，并使用 this.array[i] 迭代地操作这些元素...

希望这一切对你有意义......