堆栈照片投掷效果使用jquery

Question

我想要实现堆栈照片图片库像照片是手工抛出。

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

我尝试使用jquery animate和drop effect但它看起来并不相似。知道我该如何实现？

感谢。

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