左/右滑動菜單

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內容.menuItem在另一個容器.container以便它可以在其父級內部自由移動。 *使用menuItem_place獲取位於中心的特定.menuItem 。