javascript - jQuery - 具有多个图像的 LavaLamp 菜单？

Question

我正在试用 jQuery Lavalamp menu我正在尝试改变它并同时了解它是如何工作的。事实是，我发现的所有示例基本上都由两张图片组成。

背景和左图。没问题，但我想创建一个包含三个图像的菜单。背景，中间和左边。中间的应该与左边的 react 方式相同，始终只位于菜单项的中间。

有没有人知道应该怎么做才能实现这一目标？我只需要以某种方式在结构之间插入一个静态的 15px div。

Answer 1

嗯，他们正在做的是这样的:

• 将外部 div 放在列表下方
• 给它一个右中的形象
• 添加一个嵌套的div，即宽度的100%
• 给出左图，左对齐。

您需要做的是使用 3 个嵌套的 div。

• 带有 center/bg 的外部 div with background-position: center top;
• 左图内层div，左上角
• 最里面最右边的div, background-position: right top;

稍后我会说明...

[编辑]
js 文件中的新标记:

<li class="back"><div class="left"><div class="right"></div></div></li>

新的CSS:

.lavaLampWithImage li.back {
     background: url("middle.jpg") no-repeat center top; // could be repeat-x
     width: 9px; height: 30px;
     z-index: 8;
     position: absolute;
 }
 .lavaLampWithImage li.back .left {
     background: url("left.jpg") no-repeat left top;
     height: 30px;
}
.lavaLampWithImage li.back .right {
     background: url("right.jpg") no-repeat right top;
     height: 30px;
}

[另一个编辑]我没有意识到你想要一个静态的东西在中间。由于您现在有 2 个嵌套 div，是否可以像上面那样添加第三个？只是这次为最里面的 div 分配了 15px 的宽度并添加了 margin: 0 auto;保持其他 2 个不变。由于其他 2 个 div 填满了 100% 的可用空间，因此应该将第三个 div 放在中间。