以编程方式滚动父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集合

回答

相关问题