1

点我看示意图

我正在尝试构建一个简单的滑动垂直菜单 -一个 div 容器 (sliderContainer) 内的几个 div (#sliderOption_ )。两个箭头（上/下）将控制滑动效果。我需要滑块内的 div垂直向上或向下移动 80 像素（#optionMenu_ * 高度）。我希望 div 的 css（即边框半径），实际上是在 sliderContainer 的可见区域内，根据它们的顺序（第 1、第 2 和第 3 - 参见图片）进行更改。中间项目将是触发其他事情发生的项目 - #btn? 为此目的应出现相应的。我一直在检查其他帖子，但无法为我的案例找到解决方案... Html 结构：

<p id="upBtn">Up</p>
<p id="downBtn">Down</p>

<div id="sliderContainer">
    <div id="optionMenu_1" class="optionMenu"> Option menu 1 <div id="btn1" class="btn">1</div> </div>
    <div id="optionMenu_2" class="optionMenu"> Option menu 2 <div id="btn2" class="btn">2</div> </div>
    <div id="optionMenu_3" class="optionMenu"> Option menu 3 <div id="btn3" class="btn">3</div> </div>
    <div id="optionMenu_4" class="optionMenu"> Option menu 4 <div id="btn6" class="btn">4</div> </div>
    <div id="optionMenu_5" class="optionMenu"> Option menu 5 <div id="btn5" class="btn">5</div> </div>
    <div id="optionMenu_6" class="optionMenu"> Option menu 6 <div id="btn6" class="btn">6</div> </div>
    <div id="optionMenu_7" class="optionMenu"> Option menu 7 <div id="btn7" class="btn">7</div> </div>
</div>

我真的想要最简单的事情 - 没有外部库（如果可能的话）。这是一个包含所有元素的jsFiddle 。

任何帮助表示赞赏。谢谢。

佩德罗

4

1 回答 1

0

我已经更新了您的示例，请在此处查看。

我只是添加一个包含你的optionMenu和一些 jQuery 魔法的 div。

解释 ：

<div id="sliderContainer">
    <div class="sliderContainerInside">//add just wrapper to your .optionMenu divs
    ......
    ......
</div>//end div #sliderContainerInside

在 CSS 中添加以下内容：

.sliderContainerInside {
    position:absolute;
    top:10px;
}
#sliderContainer{
      ......
      ......
      position:relative;
}

在 JS 中：

$("#upBtn").on('click', function () {
    // slide all optionMenu_* up by 80px
    var maxUp = ($('div.optionMenu').length - 3) * 90;//now get the max px that our .sliderContainerInside can have as top(css) value. Notice that (3) represent the number of divs that 'll be visible to the user and (90) is the optionMenu height plus the value of top padding(10)
    if (-maxUp < parseInt($('.sliderContainerInside').css('top')) - 10) {
        $('.sliderContainerInside').css('top', parseInt($('.sliderContainerInside').css('top')) - 90 + 'px');
    }
    //console.info($('.sliderContainerInside').css('top') - 80);
});
于 2013-04-08T15:13:01.497 回答