滾動效果重疊的圖像與滾動

請參閱此影像第一（抱歉不便）animation effect 滾動效果重疊的圖像與滾動

現在，我的問題是：我想給這樣的效果。有誰知道使用哪種技術我將能夠做到這一點？

這是用於觸摸設備。當用戶第一次點擊時，它會顯示圖像的網格，用戶將能夠滾動瀏覽這些圖像。

基本上它可以在javascript和使用z-index屬性的jQuery庫的幫助下完成。但我沒有深入的知識去做這種滾動效果。任何幫助將不勝感激。謝謝。

UPDATE：到目前爲止的代碼（這是很基本的，只顯示重疊的圖像）

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>

來源

2013-08-30 jack

你需要證明你的code..what你這樣做的遠？ –

我已經把非常基本的代碼。 @VAGABOND – jack

嘗試jsfiddle.net ...爲了這樣的使命它的理想.. –

首先所有，那不會是一個動畫。

在這裏看到：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-30 12:07:59 nbar

但它只使用一個單一的圖像，我有很多images..check這個小提琴：http://jsfiddle.net/T6kws/1/ – jack

@jack：然後我沒有得到你想要的。你想要在gif中看到的效果鏈接到，或者你想要的效果，當用戶向下滾動它加載新的圖像？ – nbar

哦，好吧！那麼，這只是一個單一圖像的例子，實際上有不同的圖像（它將被動態地從數據庫中提取出來） – jack

滾動效果重疊的圖像與滾動

回答

相關問題