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>

...和小提琴。

谢谢你。

佩德罗

Answer 1

试试这个jsfiddle

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