jquery - 使用 jquery 堆叠照片投掷效果

Question

我想实现堆栈照片图像库，例如手动抛出的照片。

像这样：http ://www.youtube.com/watch?v=FlohNb8rnR8

我尝试使用 jquery animate 和 drop 效果，但它看起来并不相似。知道如何实施吗？

谢谢。

Answer 1

I highly recommend using greensock for animation over jquery's animate. Greensock has a lot of nice easing options to get nice smooth motion with controllable easing.

Check out the speed test comparing different JS engines.

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
    });     
});