在鼠标悬停点分割二合一图像

Question

这是我在这里的第一篇文章，所以请多多包涵。

我正在尝试在 WordPress 网站上实现响应鼠标悬停的拆分“前后”图像（由在鼠标悬停点拆分的两个图像组成）。我以前见过，所以我知道这是可能的，但是有没有我可以轻松合并的任何实现（javascript等）？这是一个模拟视频来说明我的意思：

http://youtu.be/j7BtDoxPUnU

提前感谢您的帮助。

Answer 1

我建议您使用两个位于相同位置的 DIV（第二个放在另一个上面）。您可以使用 position: absolute 样式实现此目的。

较低的 DIV 将您希望位于拆分视图右侧的图像作为其背景图像。它的大小与图像的大小相匹配并保持不变。

上面的图片以左侧的图片作为背景图片。它的宽度不断调整以匹配鼠标位置。后者是通过 Javascript 注册 onmousemove 事件来实现的。

Answer 2

这里有一个 jQuery 的小例子：http://jsfiddle.net/D5LAj/