适用于JQuery-Mobile的Coverflow插件

Question

我正在寻找的财产以后像这样的jQuery Mobile的/ PhoneGap的应用程序来使用它。 左右滑动即可更改图库中的图片。 到目前为止，我发现的所有插件都不是为移动设备设计的，或者没有像Coverflow这样的苹果。

Answer 1

不知道有什么现成的插件，但是使用CSS3和Javascript从头开始构建实际上非常简单-您甚至可以在iOS设备上获得硬件加速。

基本上，您想做三件事：

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，则设置为）设为3d-这将允许您的内部层将其位置保留在3space中，而不是由浏览器人为压平。 当用户滑动时，我们将使用css3 translation3d和rotationY来移动和旋转图像元素。 通过使用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]迭代地操作这些元素...

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