Javascript数学"绘制"多个其他矩形周围的矩形,以实现背景效果

Question

注意:我将使用与背景交替的单词overlay.

我目前正在制作一个指南模式,我突出显示元素,使它们从较暗的半透明背景中脱颖而出.

所以基本上,我有一个我想要不被覆盖的元素的选择器,然后我用半透明的黑暗div来围绕它,模拟带有排除元素的叠加.

我的解决方案适用于一个突出显示的元素,但当该数字变为2+时,很难计算如何将黑色div放在这些元素周围.事实是:突出显示的需求会因页面而异 - 这并不像那些多个元素是静态的.

所以说明我的问题:

在这里,您可以看到需要放入页面的不同框,以便使用半透明暗div来包围Box2和Box2,基本上使用突出显示的元素模拟叠加效果.对于像这样的一个案例,我可以硬编码计算,一切都会好的,但是如果 Box1比Box2高？那么如果他们不再水平重叠呢？如果Box3需要突出显示怎么办？

在任何一种情况下,我都不知道要放置多少个暗盒以及放置它们的位置.

在这种情况下,是否有任何数学公式可以帮助我？使用jQuery也是可能的,因为它包含在我的项目中.

我如何处理这个问题并使其可扩展(多个框,不同的位置)？

Answer 1

你是在思考!您正在寻找的是通过某种HTML和CSS布局实现的.

你必须使用类似于这样的布局:

.container
    .overlay
    .box
    .box
    .box
    .box

诀窍是使用全宽,半透明覆盖,并将需要突出显示的元素添加到前面.非常重要的是分配pointer-events: none到叠加层,以便您可以点击它!

让.box有z-index,比如说价值,1并.overlay有一个z-index价值100.为了突出某一点.box,将其设置z-index为101.这样它会突出显示.

我现在在移动设备上,但我提出了一个基本的概念验证Codepen.单击框以突出显示它们,再次单击以撤消.适用于多个盒子!