適用於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]迭代地操作這些元素...

希望這一切對你有意義...