Question

我正在尝试为移动野生动物园制作触摸/滑动旋转木马。到目前为止，这么好，但是当我尝试在它们被刷过之后设置元素的左侧位置时，我遇到了一个问题。左侧位置在CSS中正确设置，但显示不正确。

对不起，如果不清楚，但有点难以描述。

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

要重现，

触摸第3项
向左滑动，足以使第1项不在屏幕上（不要将手指从屏幕上抬起。你应该看到第2项，第3项，第4项，第5项和一些项目6。
将手指从屏幕上抬起（你会看到项目“跳跃”。第3项现在是第2项，项目4是第3项，等等）
现在，再次尝试向左滑动。您将再次“跳转”这些项目。第2项回到应该的位置。

基本上，我所做的是根据滑动距离翻译项目。在触摸结束时，我将元素的位置设置为平移位置。这就是它破裂的地方。

我的所有代码都在上面的网址中。

非常感谢任何帮助。

谢谢！

Answer 1

知道了！

所以我的问题是没有重置转换。我添加了这一行：

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设备中查看）

轮播 - 元素位置在touchend上可视化

1 个答案: