Google+ / Google Plus 照片堆叠，他们是怎么做到的？

Question

我正在尝试开发像 google+ 这样的相册照片堆栈， 我刚刚阅读了所有谈论这个“问题”的帖子......但没有什么......全都错了。 我正在使用 Chrome，在 google+ 中，我看到了照片的整个运动......在其他示例中，我看不到这种效果，只有开始情况和结束情况。 我看到 google+ 在正文末尾附加了一个 div，其中包含页面中 div 的相同图像，并将其（具有绝对位置）放在现有 div 上。 新的 div 进行移动，而旧的 div 没有！ 我重新创建了相同的情况，但效果不佳，我也可以看到开始和结束的情况。

这里是html

<div class="cn">
    <img src="media/images/david-guetta-will-i-am.jpg" alt="" />
    <img src="media/images/david-guetta--nothing-but-the-beat-11704-cropped.jpg" alt="" />
    <img src="media/images/Render_BMW_Serie3_F30_01.jpg" alt="" />
    <img src="media/images/david-guetta-will-i-am.jpg" alt="" />
</div>

我不知道为什么 google+ 放了第一张图片的副本。

和JS

<script type="text/javascript">
$('.cn:first').mouseenter(
function()
{
    $('body').append('<div class="cn cn2" style="z-index:5; position:absolute;">'+$(this).parent().html()+'</div>');

    $('.cn2').mouseenter(function(){
        $('.cn2 img:nth-child(1)').css({'-webkit-transform':'rotate(-6deg) translate(-40px,0) scale(1.05)'});
        $('.cn2 img:nth-child(2)').css({'-webkit-transform':'rotate(0deg) translate(0,0) scale(1.05)'});
        $('.cn2 img:nth-child(3)').css({'-webkit-transform':'rotate(6deg) translate(40px,0) scale(1.05)'});
    });
    $('.cn2').mouseleave(function()
    {
        $('.cn2 img:nth-child(1),.cn2 img:nth-child(2),.cn2 img:nth-child(3)').css({'-webkit-transform':'none'});
    });

});
</script>

这里的代码在 jdFiddle 中运行：http://jsfiddle.net/eUVNH/22/

Answer 1

我不确定，但您可能会使用 $().animate 而不是 .css()