Google+/Google Plus照片堆叠，他们是如何做到这一点的？

-3

我想开发像谷歌+，专辑照片堆栈，我只是阅读所有帖子，谈论这个“问题”......但没有......所有错误。我使用Chrome浏览器，在google +中，我看到了照片的整个移动...在其他示例中，我看不到这种效果，只有开始的情况和结束的情况。我看到google +在body的末尾附加了一个div，它包含页面中div的相同图像，并将其放在存在的div上（绝对位置）。新的div使运动而老的不运动！我重新创建了相同的情况，但不好，还可以看到开始和结束的情况。Google+/Google Plus照片堆叠，他们是如何做到这一点的？

这里的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>

我不知道为什么谷歌+把第一图像的副本。

和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/

来源

2011-10-20 Marco C

你不能使用HTTP ：//www.jsbin.com或http://jsfiddle.net/给我们一个生动的例子？ – balexandre

yes .. http://jsfiddle.net/eUVNH/22/ –

我不知道，但你可能会使用$().animate代替.css()

来源

2011-10-20 15:51:02 ArtoAle

不，这个转换不适用于$（）。animate，只适用于.css（）... –

ok，sry ...你有将-webkit转换添加到您的css [jsfiddle]（http://jsfiddle.net/eUVNH/45/） – ArtoAle

Google+/Google Plus照片堆叠，他们是如何做到这一点的？

回答

相关问题