javascript – 试图将可移动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,$origImg.height() - $zoomBox.height());

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

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

我已经在CSS中为小提琴设置了缩放元素的背景,但是如果你需要为多个图像做这个,你可以通过复制src属性在JS中完成.

原文地址：https://www.jb51.cc/js/157005.html