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 中执行此操作。