我正在尝试为移动游猎构建一个触摸/滑动轮播。到目前为止,一切都很好,但是当我尝试在元素被滑动后设置元素的左侧位置时,我遇到了一个问题。 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 项回到了它应该在的位置。
基本上,我所做的就是根据滑动距离翻译项目。在触摸端,我将元素的位置设置为翻译后的位置。这就是它的突破点。
我的所有代码都在上面的网址中。
任何帮助将不胜感激。
谢谢!
最佳答案
明白了!
所以我的问题不是重置转换。我添加了这一行:
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 设备中查看)
关于javascript - 轮播 - 元素位置在 touchend 上发生视觉变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4999021/