gpt4 book ai didi

javascript - 试图涂黑可移动 div 之外的所有内容

转载 作者:数据小太阳 更新时间:2023-10-29 04:46:34 24 4
gpt4 key购买 nike

我写了一个悬停缩放插件,我想弄清楚如何将悬停缩放框外的所有东西都变暗,并使缩放框本身透明,但我很难弄清楚我需要什么为它做。我使用不透明度吗?我是否使用背景图片?

现在它只是在较暗的黑色不透明度 bg 之上显示白色 0.5 不透明度,但我有点挠头试图弄清楚这一点。任何建议都会非常有帮助。

我正在尝试做的事情:

enter image description here

演示:jsfiddle

最佳答案

这是一个解决方案示例,但它需要您进行一些更改。

如果您将缩放方 block 设置为具有与底层图像相同的背景图像,并通过 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 中为 fiddle 设置了缩放元素的背景,但是如果您需要为多个图像执行此操作,您可以通过复制 src 属性在 JS 中执行此操作.

关于javascript - 试图涂黑可移动 div 之外的所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12306615/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com