Javascript 类似窗口的瓷砖边框效果

因此，当您将鼠标放在“瓷砖”附近时，Windows具有难以置信的效果，如下所示：

当您将鼠标放在平铺外，但在平铺容器内时（此处它位于4个平铺的交叉处）：

将鼠标放在互动程序中时（此处靠近移动热点互动程序的右上角）：

当您将鼠标放在瓷砖外，但位于瓷砖某一长度的中点时（请注意瓷砖的相对面如何亮起一点）：

为了好玩，使用css和/或JS模拟这种效果的最佳方法是什么？我使用网格布局来创建平铺，但由于我宁愿解决问题也不愿深入细节，让我们用以下假设来简化事情：

a） 用户在页面上时，互动程序的位置是固定的，不会改变
b） 可以使用JS获取任何磁贴的行和列编号
c） 所有瓷砖的尺寸都相同
d） 瓷砖容器完全填满，没有空瓷砖插槽

我的尝试： 因此，首先，我将一个

mousemove

事件侦听器放在互动程序容器上，对于鼠标的每一个移动，我都会在所有互动程序中循环，找到其边缘位于鼠标附近的所有互动程序，并适当地对其应用灯光效果。但随着瓷砖数量的增加，这开始花费太多时间

然后，我尝试使用鼠标坐标相对于瓷砖容器应用一些计算，并根据坐标提取“附近”的瓷砖，但这对我来说造成了太多问题，可能是由于一些不正确的数学

TL；博士：

---

试图找出一种快速的方法来模拟窗户的瓷砖发光效果，即使是一个粗糙的副本也可以，只要它看起来足够酷。任何帮助都将不胜感激：）

此边框/背景效果称为“显示”，是流畅设计系统的一部分。幸运的是，您不是第一个想要实现此功能的人。您可以查看此项目：。这是一个显示效果的实现，效果非常好

如果您想自己解决它，我认为

mousemove

事件是正确的选择。当鼠标移动时，获取从鼠标位置到具有“显示效果”的每个元素的距离，并确定它们是否足够接近以产生“显示效果”。如果某个元素足够近，只需在鼠标位置上渲染一个圆形渐变，并在“显示半径”中的每个元素的背景/边界处设置该渐变。这对于几十个项目来说应该足够好了。 除了mousemove，您还需要处理

mouseleave

和

mouseenter

以避免分隔缝卡在边框上，您还需要收听滚动事件，否则分隔缝也将卡在上一个位置

---

一种更有效的方法（尽管我不完全确定如何实现它）是使用一个图像，在其中绘制显示效果，就像它是一个巨大的按钮一样。然后，您只需“剪切”表面，并根据按钮的位置将其背景设置为图像的剪切。问题是创建曲面并将其正确应用于控件，因此如果没有太多的项目，我会选择第一个选项。

这里有一个公认的黑客解决方案。但是，如果您的菜单具有静态尺寸，则应执行以下操作：

const container=document.getElementById（'container'）；
const glow=document.getElementById（'glow'）；
container.addEventListener（'mousemove'，e=>{
glow.style.left=e.pageX+'px'；
glow.style.top=e.pageY+'px'；
});
container.addEventListener（'mouseenter'，（）=>{
glow.style.display='block'；
})
container.addEventListener（'mouseleave'，（）=>{
glow.style.display='none'；
})

正文{
保证金：0；
背景色：#111111；
}
#容器{
显示：网格；
网格模板列：重复（3150px）；
网格模板行：重复（3100px）；
间隙：10px；
位置：相对位置；
宽度：适合的内容；
溢出：隐藏；
}
#容器>*{
背景：rgb（77,77,77）；
}
#发光{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
高度：200px；
背景：径向梯度（#fff，透明70%）；
转换：翻译（-50%，-50%）；
z指数：-1；
}
#集装箱，垂直的{
位置：绝对位置；
身高：100%；
宽度：8px；
排名：0；
背景:#111111；
}
.垂直的{
左：151px；
}
.垂直二{
左：311px；
}
#容器。水平{
位置：绝对位置；
宽度：100%；
高度：8px；
左：0；
背景:#111111；
}
.水平一号{
top:101px；
}
.水平二{
顶部：211px；
}

这只在指针没有快速离开窗口时有效，否则显示效果会留在边缘，这可能不太理想。这对我来说是不可能的。你在使用哪个浏览器？我在使用Edge Dev频道，版本89.0.731.0。哦，我正在使用。我已更新设置

mouseleave上的
display:none
和
mouseenter上的
display:block
。这太完美了，非常感谢！非常感谢你！特别是对于剪切的想法，这是我想要实现的，但不确定它是否可行，因此非常感谢您的澄清：）我也不确定这是否可行，但是这个“剪切”是（可能）Windows 10实现它的方式，因此为了完整性，我认为最好提及它：）