2012-09-06 29 views
7

我寫了一個懸停縮放插件,我試圖弄清楚如何遮住懸停縮放框之外的所有東西,並使縮放框本身透明,但我有一段艱難的時間試圖找出我需要爲此做些什麼。我是否使用不透明度?我使用背景圖片嗎?試圖遮住可移動div以外的所有東西

現在它只是在黑暗的黑色不透明bg上顯示一個白色的.5不透明度,但我有點摸不着頭腦。任何建議將是超級有用的。

我想要做的事:

enter image description here

演示:jsfiddle

+3

聽起來像一個CSS面具的工作,雖然你可能不得不犧牲一些瀏覽器支持:http://www.webkit.org/blog/181/css-masks/ –

+0

@MikeRobinson哦哇:(這正是什麼我需要,但它是一個無賴,它只是webkit。謝謝你的信息。 –

回答

4

這裏有一個解決方案的例子,但它需要你做出一些改動。

如果將縮放廣場設置爲具有與底層圖像相同的背景圖像,並通過CSS調整其背景位置以使其相對於原始圖像的位置爲負值,那麼我能正確解釋它嗎?

http://jsfiddle.net/moopet/Be9AA/

的重要組成部分,是

var left = Math.min(Math.max(relX - 100, 0), $origImg.width() - $zoomBox.width()), 
    top = Math.min(Math.max(relY - 100, 0), $origImg.height() - $zoomBox.height()); 

$zoomBox.css({ 
    left: left, 
    top: top 
}); 

$zoomBox.css({ backgroundPosition: (-left) + "px " + (-top) + "px" }); 

而且我已經設置在CSS的小提琴縮放要素的背景,但如果你需要爲多張圖片做到這一點你可以通過複製src屬性在JS中執行此操作。

+0

非常聰明的解決方案。我已經開始第一次玩額外的背景圖片... – gotqn

+0

+1。非常聰明,這是輝煌的。 –

相關問題