jquery - 左/右滑动菜单

Question

我的菜单基本上是一个水平项目滑动条。所有菜单项都有特定的默认 CSS 属性。我希望这些项目在到达主容器的中心时更改其大小和左/右边距，并在离开主容器(或位于主容器之外)时重置为默认值。请参阅我的原理图。

有一个左/右按钮可以触发滑动方向。我知道有此类库，但我真的想要最简单的东西。这是 HTML 标记:

<div id="leftBtn">Left</div>
<div id="rightBtn">Right</div>

<div id="centerArea">
    <div id="menuContainer">
        <div id="menuItem_1" class="menuItem"></div>
        <div id="menuItem_2" class="menuItem"></div>
        <div id="menuItem_3" class="menuItem"></div>
        <div id="menuItem_4" class="menuItem"></div>
    </div>
</div>

...以及fiddle .

谢谢。

佩德罗

Answer 1

试试这个 jsfiddle

它遵循以下方法* 将 .menuItem 的内容包含在另一个容器 .container 中，以便它可以在其父容器内自由移动。* 使用 menuItem_place 获取位于中心的特定 .menuItem。