jquery - 在鼠标悬停时向左和向右扩展图像

Question

我正在尝试在鼠标悬停时向左和向右移动图像，在鼠标移开时它会恢复到之前的状态。

例如，如果图像的原始宽度为 120 px，那么在页面加载时它将显示 100 px，并且在鼠标悬停时它将向左和向右扩展。因此它将向左多 10px，向右多 10px。

<img src="http://st.depositphotos.com/1742172/2000/v/110/depositphotos_20007761-Old-scroll-banner-cartoon.jpg" id="expandimg" />

演示 http://jsfiddle.net/squidraj/9FtBY/5/

但现在它只在右侧展开。请提出任何建议。

刚刚发现css3中有一个叫clip的东西？

Answer 1

嗯，基本上你的代码是正确的。动画看起来会向右扩展，因为图像是左对齐的。

如果你将它包裹在一个 div 中并让它居中对齐，它看起来会“不错”。

<div class="wrapper"><img src="http://st.depositphotos.com/1742172/2000/v/110/depositphotos_20007761-Old-scroll-banner-cartoon.jpg" id="expandimg" /></div>

http://jsfiddle.net/GVdmF/

---

“好”用引号括起来，因为图像被拉伸(stretch)了。您最好采用使用背景图像的解决方案。如果你稍等一下，我可能会看看我能做些什么。

---

编辑:我们再来一次:http://jsfiddle.net/GVdmF/2/

• 我把你的照片分成了 3 个部分:left.png、center.png 和 right.png。
• 我在 div 中添加了 center.png
• 我添加了伪类 :before 和 :after，使它们成为 block 元素并添加了高度/宽度以及相应的背景图像 left.png 和 right.png

您的 JS 几乎保持不变。希望这对您有所帮助。