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照片堆疊，他們是如何做到這一點的？

回答

相關問題