左右滑动菜单 [英] Left/right sliding menu

问题描述

我有一个基本上是水平项目滑动条的菜单.所有菜单项都有特定的默认CSS属性.我希望这些物品在到达主容器的中心时更改其大小和左/右页边距，并在它们离开主容器(或在其外部)时重置为默认值.看看我的示意图.

I have this menu that's basically an horizontal items sliding bar. All menu items have specific default css properties. I want the items to change their size and left/right margins when they reach the center of the main container and reset to the default values when they leave it (or are outside of it). See my schematic.

有一个向左/向右按钮，将触发它向哪个方向滑动. 我知道有一些用于此类事情的库，但我确实想要最简单的方法. 这是HTML标记:

There's a left/right button that will trigger which direction it will slide. I know there are libraries for this sort of thing, but I really want the simplest possible thing. Here's the HTML markup:

<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>

...和小提琴.

谢谢.

佩德罗

推荐答案

尝试一下 jsfiddle

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

It follows following approach * enclose contents of .menuItem in another container, .container so that it can move freely inside it's parent. * use the menuItem_place to get particular .menuItem that's in center.

这篇关于左右滑动菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！