0

我想为移动设备制作一个与 Flickr 功能相似的图片库。

我希望它根据您的手指移动的方向在 touchmove 上移动图像，如果您做出一个小的滑动手势，我希望它一直移动图像，或者如果没有滑动足够大，将 div 移回 x 轴上的起始位置。

我知道逻辑会是什么样子，我只是不确定要使用的语法。

我认为它会是这样的：

在 touchstart - 为 touchstart 的 x 位置分配变量

在 touchmove - 为 touchmove 的 x 位置分配变量 - 为 touchmove 减去 touchstart 分配一个变量 - 将（touchmove 减去 touchstart）添加到 div 的当前 x 位置

在 touchend - 如果 touchmove => touchstart + 50px 然后将 1000px - (touchmove-touchstart) 添加到 divs x 位置

-else if touchmove =< touchstart - 50px 然后从 div x 位置减去 1000px + (touchmove - touchstart)

Else Minus (touchmove - touchstart) 从 div 的 x 位置开始

谁能把这个^^^翻译成javascript？

4

1 回答 1

1

如果你真的能接受挑战，有很多事情需要考虑。您需要使其独立于平台，决定是否使用 JavaScript、CSS3 动画或两者兼而有之。它需要响应并允许按需加载图像等。向后兼容性怎么样？

您还需要采用一些巧妙的逻辑，不仅检测 touchstart 和 touchmove 之间的距离，还检测完成的速度。例如，用户可以非常快速地轻弹他们的手指一小段距离，从而导致转换发生，或者可以非常缓慢地将他们的手指移动很长距离，导致不发生转换（在限制内）。

因此，要回答您的问题，不，这不仅会自行制作动画。如果没有一些巧妙而高效的 JavaScript 或CSS3 动画，它就不会流畅地移动。

我建议使用已经存在的许多 JQuery 库之一来为您执行此操作。那里有许多免费的图书馆，它们都很好用。经过快速搜索，我找到了这个：

http://www.photoswipe.com/，这似乎正是您想要实现的目标。

于 2013-03-14T00:45:21.933 回答