移動可能なdivの外のすべてを黒くしようとしています

Question

私はホバーズームプラグインを作成しました。ホバーズームボックス外のすべてを暗くする方法を理解しようとしています。私がそれのために何をする必要があるかを理解するのに苦労しています。不透明度を使用しますか？私は背景イメージを使用しますか？

今は暗い黒色の不透明度bgの上に白い.5の不透明度が表示されていますが、私はこれを理解しようとしています。どんな提案も非常に役立つでしょう。私がやろうとしている何

：

デモ：jsfiddle

Answer 1

はここで解決策の一例だが、それは変更のカップルを作るために必要があります。

バックグラウンドイメージが元のイメージと同じになるようにズームの広場を設定し、その背景位置を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でそれを行います。