旋轉木馬 - 元素位置在touchend上的視覺變化

我正在嘗試構建移動Safari的觸摸/滑動輪播。到目前爲止，這麼好，但是當我嘗試在元素被刷過後設置元素的左側位置時，我遇到了一個問題。在CSS中左側位置正確設置，但它們顯示不正確。旋轉木馬 - 元素位置在touchend上的視覺變化

對不起，如果這不清楚，但有點難以描述。

Please see the problem here (please view on your iOS or Android device).

要重現，

觸摸項目3
向左滑動，就足以使項目1是關閉屏幕（不要擡起手指離開屏幕上，您應該看到項目2，項目3，項目4，項目5以及項目6的某些項目。
將手指從scre en（你會看到「跳」項。項目3現在是項目2所在的位置，項目4所在的項目3所在的位置等）
現在，嘗試再次向左滑動。你會將這些項目再次「跳躍」。第2項回到它應該在的位置。

基本上，我所做的是根據滑動距離來翻譯項目。在觸摸結束時，我將元素的位置設置到翻譯的位置。這就是它破裂的地方。

我所有的代碼都在上面的url中。

任何幫助將不勝感激。

謝謝！

來源

2011-02-15 ant

Got it！

所以我的問題是沒有重置變換。我添加了這一行：

items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)";

我的updatePosition函數，一切都很好！

function updatePosition(){ 
    for(var i=0; i<items.length; i++){ 
     var translatedLeft = getTranslatedPosition(items[i]).left; 
     items[i].style.left = translatedLeft + "px"; 
     items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)"; 
    } 
    }

工作演示在這裏：http://dl.dropbox.com/u/10250170/dev/carousel/touch_test.html（在iPhone模擬器或您的iOS或Android設備視圖）

來源

2011-02-15 20:32:22 ant

旋轉木馬 - 元素位置在touchend上的視覺變化

回答

相關問題