0

请先看这张图（不便之处请见谅）动画效果

现在，我的问题是：我想给出这样的效果。有谁知道我可以使用哪种技术来做到这一点？

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

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

jsfiddle：检查这个 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>
4

1 回答 1

0

首先，那不会是动画。

见这里：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" );

}
于 2013-08-30T12:07:59.667 回答