试图阻止可移动div之外的所有内容

我写了一个悬停缩放插件，我试图弄清楚如何遮住悬停缩放框外的所有东西，并使缩放框本身变得透明，但是我正在艰难地尝试弄清楚我需要做什么它。 我是否使用不透明度？ 我使用背景图片吗？

现在它只是在黑色的不透明bg上显示一个白色的.5不透明度，但我有点挠头，试图弄清楚这一点。 任何建议将是超级有用的。

我在做什么：

演示：jsfiddle

---

这是一个解决方案的例子，但它需要你做一些改变。

如果将缩放广场设置为具有与底层图像相同的背景图像，并通过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中执行此操作。

链接地址: http://www.djcxy.com/p/63545.html

上一篇: Trying to black out everything outside of a moveable div

下一篇: How add a custom UIView to a storyboard scene