滚动效果 - 滚动重叠图像

Question

请先查看此图片（抱歉给您带来不便）animation effect

现在，我的问题是： 我想发挥这样的效果。 有谁知道我可以使用哪种技术？

适用于触摸设备。当用户第一次点击时，它会显示图像网格，用户可以滚动浏览这些图像。

基本上可以使用z-index 属性在 javascript和jquery库的帮助下完成。 但我没有深入的知识去做这样的滚动效果。 任何帮助将不胜感激。 谢谢。

jsfiddle：check this jsfiddle

更新：到目前为止的代码（非常基本，只显示重叠的图片）

html部分

 <div id="div1">You can also drag here!</div>

                <div id="div2">
                <p>Scroll Me!</p>                

            <img src="images/2.jpg"  id="drag22"> 
            <img src="images/3.jpg"  id="drag32">


                </div> <!--div2-->

脚本部分

<style  type="text/css">
#div2
{

    overflow-x: scroll;
    overflow-y: scroll;
    white-space:nowrap;
    width: 500px;
    height: 300px;
    border:2px;
    border-color:blue;
    position:relative;
}


#drag22 {
/* bird; */
z-index:22;
position:absolute;
top: 100px; 
left:10px;
/* opacity:0.7; */
/* height:40px; */
/*float:right;*/
} 
#drag32 {
/* graph */
z-index:21;
position:absolute;
top: 30px; 
left:60px;
}

</style>

Answer 1

首先，这不是动画。

见这里：http://jsfiddle.net/gRaDf/

var width =225;
var height=95;
for(var i=0;i<10;i++) {
     clonedimage = $("img#"+i).clone();
    clonedimage.attr("id", i+1);
    clonedimage.css("width", width-(i*10));
    clonedimage.css("height", height-(i*5));
     clonedimage.appendTo( "div" );

}