用于移动的Javascript图片库

我想为与Flickr具有类似功能的移动设备创建图库。用于移动的Javascript图片库

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

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

我认为这会是这样的：

在touchstart 为touchstart

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

在touchend - 如果touchmove => touchstart + 50像素然后加入1000像素 - （touchmove-touchstart）到的div x位置

-else如果touchmove = < touchstart - 50像素然后减去1000像素+（touchmove - touchstart）从所述的div x位置

否则减（touchmove - touchstart）从div的x位置

任何人都可以翻译此^^^为JavaScript？

来源

2013-03-13 EmmaGamma

如果你真的接受了这个挑战，那么需要考虑很多事情。您需要使其与平台无关，决定是否使用JavaScript，CSS3动画或两者兼而有之。它需要有响应并允许图像按需加载等。向后兼容性如何？

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

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

我会推荐使用已经存在的很多JQuery库之一来为你做这个。那里有很多免费的图书馆，效果很好。经过快速搜索，我发现这一个：

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

来源

2013-03-14 00:45:21 Melon

如果在触摸移动过程中div的x位置根据手指的当前位置发生变化，那么它将以您的手指移动的任何速度移动，并且在滑动时是向前或向后播放足够大，我可能会希望它以一定的速度前进并缓解。理想情况下，我不想使用任何类型的库或插件。我只想使用普通的JavaScript，但我会检查photoswipe，看看我是否喜欢它。 – EmmaGamma 2013-03-14 06:05:27

看完之后，我有几个问题。它显然运行得非常好，并与所有浏览器等兼容......但我怎样才能改变它的风格？另外，是否可以只使用幻灯片部分，而不是缩略图？如果我能以这种方式完全定制它，我会更感兴趣。主要是，我想最大限度地控制它的外观和行为，这就是为什么我更愿意手工编写所有代码的原因，但是如果我可以更改所有的CSS并只使用我想要使用的部分，那么我可能会去用它。 – EmmaGamma 2013-03-14 06:22:50

只为自己回答了一个问题，可以仅使用不带缩略图的幻灯片。 – EmmaGamma 2013-03-14 06:25:50

用于移动的Javascript图片库

回答

相关问题