javascript - 类似 Windows 的平铺边框效果

Question

因此，当您将鼠标放在像这样的“磁贴”附近时，Windows 会产生这种不可思议的效果:

1. 当您将鼠标放在图 block 之外，但在图 block 容器内(此处位于 4 个图 block 的交点处)时:

1. 当您将鼠标放在磁贴内时(此处靠近移动热点磁贴的右上角):

1. 当您将鼠标放在图 block 外部但位于图 block 某个长度的中点时(请注意图 block 的相对两侧如何点亮):

只是为了好奇/有趣，使用 css 和/或 JS 模拟这种效果的最佳方法是什么？我正在使用网格布局来创建图 block ，但由于我宁愿解决问题而不是深入细节，让我们用这些假设来简化事情:

a) 瓦片的位置是固定的，在用户在页面上时不会改变
b) 可以使用JS获取任意瓦片的行号和列号
c) 所有瓷砖的尺寸相同
d) 瓷砖容器完全装满，没有空的瓷砖槽

我的尝试:

所以一开始我在瓦片容器上放置了一个 mousemove 事件监听器，对于鼠标的每一次移动，我都会遍历所有瓦片，找到所有边缘位于鼠标附近的瓦片，并适本地对它们应用点亮效果。但随着瓷砖数量的增加，这开始花费太多时间。

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

TL;DR:

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

Answer 1

这是一个公认的 hacky 解决方案。不过，如果您的菜单具有静态尺寸，它应该可以解决问题:

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';
})

body {
  margin: 0;
  background-color: #111111;
}

#container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  position: relative;
  width: fit-content;
  overflow: hidden;
}

#container>* {
  background: rgb(77, 77, 77);
}

#glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(#fff, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

#container .vertical {
  position: absolute;
  height: 100%;
  width: 8px;
  top: 0;
  background: #111111;
}

.vertical-one {
  left: 151px;
}

.vertical-two {
  left: 311px;
}

#container .horizontal {
  position: absolute;
  width: 100%;
  height: 8px;
  left: 0;
  background: #111111;
}

.horizontal-one {
  top: 101px;
}

.horizontal-two {
  top: 211px;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="glow"></div>
  <div class="vertical vertical-one"></div>
  <div class="vertical vertical-two"></div>
  <div class="horizontal horizontal-one"></div>
  <div class="horizontal horizontal-two"></div>
</div>

它本质上是一个带有白色径向渐变的 div，它在光标移动时跟随光标位置。骇人听闻的部分是使用与每个元素之间的背景颜色相同的条形图。不是我所说的可扩展解决方案，但它确实有效。