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

时间:2012-07-20 08:15:20

标签: javascript image wordpress slider mouseover

这是我在这里的第一篇文章,所以请耐心等待。

我试图实施拆分"之前&后"图像(由鼠标悬停时分割的两个图像组成),可响应WordPress网站上的鼠标悬停。我之前见过,所以我知道这是可能的,但有没有我可以轻松合并的任何实现(javascript等)?这是一个模拟视频来展示我的意思:

http://youtu.be/j7BtDoxPUnU

提前感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

我建议你使用两个处于相同位置的DIV(第二个位于另一个顶部)。您可以使用样式position: absolute实现此目的。

下部DIV将您想要在分割视图右侧的图像作为其背景图像。它的大小与图像的大小相匹配并保持不变。

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