javascript - 移動可能な div の外側のすべてを黒く塗りつぶそうとしています

Question

ホバー ズーム プラグインを作成しました。ホバー ズーム ボックスの外側のすべてを暗くし、ズーム ボックス自体を透明にする方法を見つけようとしていますが、何をする必要があるかを理解するのに苦労しています。それ。不透明度を使用しますか? 背景画像を使用しますか?

現在、暗い黒の不透明度の上に白い 0.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 で行うことができます。