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

Question

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

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

提前感谢您的帮助。

score 1 · Accepted Answer

1

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

于 2012-07-20T08:39:32.793 回答

score 0 · Accepted Answer

我建议你使用两个相同位置的 DIV（第二个放在另一个上面）。您可以使用 style 来实现这一点position: absolute。

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

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

2 回答 2