i m trying to develop an album photo stack like google+, i just read all post that talk about this "problem" ... but nothing..all wrong. I m using Chrome and, in google+ ,i see the whole movement of the photos... in the others examples i can t see this effect, only the begin situation and the end situation. I see that google+ append a div at the end of body, that contain the same images of the div in the page, and put it(with absolute position) over the exist div. The new div make the movement while the old one don t! i recreate the same situation , but don t work good, also i can see the begin and end situation.
页: 1
<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>
i 不知道为什么Google+带上第一个图像的复印件。
E/CN.15/2008/L.13。
<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>
http://jsfiddle.net/eUVNH/22/“rel=” http://jsfiddle.net/eUVNH/22/。