用於移動的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圖片庫

回答

相關問題