以編程方式滾動父div中的div集合

我有一個父div，裏面充滿了多個子div（請參閱我在說的http://garyoak.com/images/MgMenu.png）。我希望能夠通過鍵盤瀏覽它，所以我一直在尋找一種方式，當用戶推動可見元素時，向上或向下滾動子div。我可以計算出用戶何時完成了這個操作，但我不確定如何實際向上/向下滾動內部div。我有jQuery可用，並可以添加擴展到它沒有問題。我知道jQuery插件，如可滾動和旋轉木馬，但我希望有一個更簡單的方法來做到這一點。以編程方式滾動父div中的div集合

的HTML最終看起來像這樣：

<div id="MaigcPanels" class="MagicPanels"> 
     <div id="MagicPanel0" class="MagicPanelSelected"><div class="Ice"><div class="MagicName">Blizzara</div><div class="MPCost">36</div></div></div> 
     <div id="MagicPanel1" class="MagicPanel"><div class="Fire"><div class="MagicName">Fire</div><div class="MPCost">15</div></div></div> 
     .... (rest of panel divs) 
    </div>

第一個div已MagicPanelSelected作爲其類，因爲它是當前選定的股利。我可以保證，無論我需要展示的主動/重要div都會有這個類。

在使用場景方面，我使用它來爲C++遊戲設計菜單（因此幾個預先定義的變量被推入頁面，然後通過awesomium呈現它們）。這就是爲什麼我要在不使用鼠標的情況下做到這一點。 Awesomium基於最近的Chrome版本，因此該解決方案不需要跨瀏覽器兼容，只要它適用於Chrome即可。

我可以保證固定長度的父div和子div的大小（一旦我決定了適當的長度），但是MagicPanel div的數量可以從任何一個時間範圍從0加載到父MagicPanels div到120+。我有變量可以告訴我總共有多少個div，每行有多少個div。

當用戶滾動經過設定的div，我想能夠循環回到開始（通過快速滾動回到頂部，或環底部再次頂部的div）

如果是重要的，這是爲那些元素

.MagicPanels 
{ 
    width: 580px; 
    height: 160px; 
    left: 4px; 
    position: relative; 
    display: inline-block; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 

    -webkit-box-shadow: 5px 5px 5px #888; 
    box-shadow: 5px 5px 5px #888; 
    border-width: 16px 16px 16px 16px; 
    -moz-border-image: url(MagicBorder.png) 33 32 33 34 round; 
    -webkit-border-image: url(MagicBorder.png) 33 32 33 34 round; 
    -o-border-image: url(MagicBorder.png) 33 32 33 34 round; 
    border-image: url(MagicBorder.png) 33 32 33 34 round; 
    z-index: 1; 
    overflow: hidden; 
} 

.MagicPanel 
{ 
    width: 150px; 
    height: 30px; 
    margin: 0 10px 7px; 
    opacity: 0.5; 
    display: inline-block; 
    position: relative; 
} 
.MagicPanelUnusable 
{ 
    width: 150px; 
    height: 30px; 
    margin: 0 10px 7px; 
    opacity: 0.3; 
    display: inline-block; 
    position: relative; 
} 

.MagicPanelSelected 
{ 
    width: 150px; 
    height: 30px; 
    margin: 0 10px 7px; 
    background-opacity: 1.0; 
    display: inline-block; 
    position: relative; 
}

其他CSS類（即火，冰等），只定義文本的梯度/字體和對的時沒有效果的CSS div的。

如果有人知道如何做到這一點，或者可以給我一個很好的起點，我會很感激。

謝謝

來源

2011-08-01 Megatron

Woow a jQ game？當你完成遊戲時，你能否給我們鏈接遊戲？ :) –

你可以像這樣設置任何dom元素的scrollTop。我希望這可以幫助你在代碼中應用邏輯。

var valueToScroll = 100; 
$("selector").scrollTop(valueToScroll); 

//With animation 

$("selector").animate({ scrollTop: valueToScroll }, { duration: 200 });

來源

2011-08-01 19:56:31 ShankarSangoli

以編程方式滾動父div中的div集合

回答

相關問題