鼠標懸停點處的二合一圖像分割

這是我的第一篇文章，請耐心等待。鼠標懸停點處的二合一圖像分割

我試圖實現一個分裂「之前&」之前的圖像（包括兩個圖像，在鼠標懸停點分割），響應鼠標懸停在WordPress網站上。我見過以前做過，所以我知道這是可能的，但是有沒有實現這個，我可以很容易地合併（JavaScript等）？這裏有一個實體模型，視頻展示了我的意思：

感謝您的幫助提前。

2012-07-20 Tim

藉此：http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ – totten 2012-07-20 08:20:19

大腳本，謝謝！有沒有辦法讓它響應鼠標懸停，而不是點擊它？那將是完美的。 – Tim 2012-07-20 08:29:23

我建議你使用兩個位於相同位置的DIV（第二個放在另一個頂部）。你可以通過position: absolute的風格來達到這個目的。

較低的DIV將想要位於分割視圖右側的圖像作爲其背景圖像。它的大小與圖像的大小相匹配並保持不變。

上面那個圖像的左側爲背景圖像。它的寬度不斷調整以匹配鼠標位置。後者是通過註冊一個onmousemove事件用Javascript實現的。

2012-07-20 08:26:04 Codo

這裏有一個小爲例使用jQuery：http://jsfiddle.net/D5LAj/

2012-07-20 08:39:32

回答