Как складывать фотографии в Google+ / Google Plus, как они это делают? - PullRequest
Новая
       3

Как складывать фотографии в Google+ / Google Plus, как они это делают?

0 голосов
/ 20 октября 2011

Я пытаюсь разработать альбом фотографий для стека, как 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/

1 Ответ

0 голосов
/ 20 октября 2011

Я не уверен, но вы, вероятно, использовали бы $().animate вместо .css()

...