手机的Javascript图片库

时间:2013-03-13 22:51:27

标签: javascript mobile image-gallery touch-event

我想为具有与Flickr类似功能的移动设备制作图库。

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

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

我认为它是这样的:

在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     然后从divs x位置减去1000px +(touchmove - touchstart)

否则     从div的x位置减去(touchmove - touchstart)

任何人都可以将此^^^翻译为javascript吗?

1 个答案:

答案 0 :(得分:1)

如果你真的能够应对挑战,那么有很多事情需要考虑。您将需要使其与平台无关,决定是使用JavaScript,CSS3动画还是两者进行动画制作。它需要响应并允许按需加载图像等。向后兼容性怎么样?

您还需要使用一些聪明的逻辑,这些逻辑不仅可以检测touchstart和touchmove之间的距离,还可以检测速度。例如,用户可以非常快地轻弹他们的手指导致转换发生或者可以非常缓慢地移动他们的手指长距离导致不发生转换(在限制内)。

所以要回答你的问题,这不仅仅是动画本身。如果没有一些聪明有效的JavaScript或CSS3 animations,它将无法顺利进行。

我建议使用已有的许多JQuery库中的一个来为您执行此操作。有很多免费图书馆都很棒。快速搜索后我发现了这个:

http://www.photoswipe.com/,这似乎完全符合您的目标。