左/右滑动菜单

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。