雙向滾動輪播

在我的html應用程序中，我想要一個n * n的網格，並且在任何時間只顯示一部分。
每個圖塊顯示html內容而不是圖像。
用戶可以水平或垂直滾動一行或一列。
在地圖上加載新的圖塊時，它應通過 ajax加載內容。

我去了，雖然許多不同類別的旋轉木馬，瓷磚引擎，地圖渲染庫和...雙向滾動輪播

圖書館在每個類別中的JS庫的缺失的一件事或其他。

轉盤 - 雙向滾動和電網不存在
瓷磚引擎 - 不提供瓷磚的異步加載。
地圖渲染器 - 僅支持圖層/圖像。

建議我一個合適的庫，最適合這個要求。

來源

2013-02-01 manoj

試試這個HTTPS：//github.com/cubiq/2-way-iScroll \ –

看起來不錯。沒有任何關於任何html標籤的顯示，我可以在屏幕上顯示時通過ajax加載內容。必須找到一種方法來做到這一點。 – manoj

嘗試使用iScroll.js它會工作

<script src="http://lab.cubiq.org/iscroll/src/iscroll.js"></script> 
<div id="vertical"> 
    <div id="vert_scroller"> 

    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     var HTML = ""; 
     for(i=0;i < 10;i++){ 
      HTML += '<div id="sc'+i+'" class="innerWrap"><div class="innerSc"><span>'+(Math.random()*64654).toString()+'</span></div></div>'; 
     } 
     $("#vert_scroller").html(HTML); 
     myScroll = new iScroll('vertical'); 
     for(i=0;i<10;i++){ 
      innerScroll_1 = new iScroll('sc'+i); 
     } 
    }) 
</script> 


    #vertical{ 
    top:0px; 
    left:0px; 
    position:relative; 
    height:300px; 
    width:300px; 
    z-index:1; 
    letter-spacing: 1em; 
} 

#vert_scroller{ 
    width:100%; 
    display:inline-block; 
} 
.innerWrap{ 
    height:40px; 
    width:100%; 
    position:relative; 
    z-index:1; 
    top:0px; 
    left:0px; 
} 
.innerSc{ 
    padding:10px; 
    width:450px; 
    display:inline-block; 
    border-bottom:1px solid black; 
}

來源

2013-02-01 11:42:33 Amar

雙向滾動輪播

回答

相關問題