左/右滑菜单

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。

谢谢。

Pedro

- Pedro

---

menuItem_position = - (menuItem_place * 200) + 25; http://jsfiddle.net/2Vngt/1/菜单项位置 = -（菜单项位置 * 200）+ 25; http://jsfiddle.net/2Vngt/1/ - David Fregoli

这解决了居中问题。谢谢David！你不会恰好知道如何设置内部/外部中心区域的不同CSS值吧？ - Pedro

最好的方法是为活动元素添加CSS类：http://jsfiddle.net/2Vngt/3/ - David Fregoli

工作得很好。只有一个问题：它不能在IE8中运行。你能否使用jQuery animate()代替css3？谢谢。 - Pedro

Answer 1

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

- Ejaz

---

太棒了！顺便问一下，是否可以同时拥有鼠标悬停和点击选项？ - Pedro

是的，当然可以使用CSS的:hover或者jQuery.hover(..,..)来实现。编辑：啊，你是指“点击菜单项滚动到下一个”吗？ - Ejaz

不是按钮。 :) 我指的是项目本身 - 点击它们将它们带到中间。 - Pedro

这正是我想表达的。谢谢你，Ejay！ - Pedro

Ejay，只剩下两件事要做了：当项目到达其极限时（我尝试过使用一些if语句进行操作，但是我没有成功），禁用左/右按钮，并且添加一个简单的mouseenter/mouseleave（比例调整），当到达左/右边界时也会自动禁用。fiddle 更新。 - Pedro