谷歌+ / Google Plus 照片堆叠，他们是如何做到的？

Question

我正在尝试开发一个像 google+ 这样的相册照片堆栈， 我刚刚阅读了所有谈论这个“问题”的帖子......但没有什么......都是错的。 我正在使用 Chrome，在 google+ 中，我看到照片的整个运动......在其他示例中，我看不到这种效果，只能看到开始情况和结束情况。 我看到 google+ 在正文末尾附加了一个 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()