堆棧照片投擲效果使用jquery

Question

我想實現堆棧照片圖片庫像手工拋出的照片。

這樣的：http://www.youtube.com/watch?v=FlohNb8rnR8

我試着使用jQuery動畫拖放的效果，但它看起來並不相似。任何想法我怎麼能實現？

謝謝。

Answer 1

我強烈建議使用greensock作爲jquery動畫的動畫。 Greensock有很多很好的寬鬆選項，可以通過可控制的緩動來獲得漂亮的平滑運動。

檢查出speed test比較不同的JS引擎。

Answer 2

您需要將所有圖像完全放置在屏幕上，然後逐個隨機地在屏幕上對其位置進行動畫製作，每個圖像的z-index都比前一個要高。

有了jQuery的回調函數，你可以順利地讓每一個都出現在另一個之後。 你需要想出一些有限的math.random邏輯（可能在窗口高度/寬度等）。但基本上這個想法有點像這樣。

var zindex = 100; 

$('img').each(function() { 
    $(this).css('z-index', zindex++) 
      .animate({ top: _yVariable, left: _xVariable }, _timeVariable, function() { 
     return; //restart loop once this animations finished 
    });  
});