Google+/Google Plusのフォトスタッキングは、どうやってこれを行うのですか？

Question

私はgoogle +、 のようなアルバム写真のスタックを開発しようとしています。私はちょうどこの "問題"について話すすべての投稿を読んでいます...しかし何も間違っています。 私はChromeを使用しています.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> 

グーグル+は、最初の画像のコピーを置く理由を私は知りません。

、ここ

<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でコードが実行JS：http://jsfiddle.net/eUVNH/22/

Answer 1

私はわからないんだけど、あなたはおそらく代わりに.css()