用于移动设备的 Javascript 图像库

Question

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

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

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

我想应该是这样的：

在触摸启动时 -为touchstart的x位置分配变量

触摸移动 - 为 touchmove 的 x 位置分配变量 - 为 touchmove 减去 touchstart 分配一个变量 - 将 (touchmove 减去 touchstart) 添加到 div 的当前 x 位置

在触摸端 - 如果 touchmove => touchstart + 50px 然后将 1000px - (touchmove-touchstart) 添加到 div x 位置

-else if touchmove =

其他 从 div 的 x 位置减去 (touchmove - touchstart)

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

Answer 1

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

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

所以要回答您的问题，不，这不会自动生成动画。如果没有一些聪明高效的 JavaScript 或CSS3 animations，它将无法顺利移动。

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

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