Javascript 如何使图像不透明度响应光标位置

我有一幅古色古香的“绕道”标志的卡通画，上面的字母中嵌入了暗光反射镜。我希望反射器在图像悬停时变亮。我知道，这很容易做到，只需更换一个版本的图像，反射器变暗，悬停时图像变亮（根据下面的标记）。但是，这样做会使反射器显示为打开或关闭闪烁。我希望它们在光标靠近图像中心时变得越来越亮，当然，在光标离开图像中心时变得越来越暗，就像现实生活中发生的那样。（如果您的前照灯以倾斜角度照射反射器，则它们反射回来的光线将比前照灯直接照射时更暗。）

我的想法是根据光标的位置来增加图像加亮版本的不透明度。所以，我需要（我认为）一个脚本来检测光标位置并相应地增加或减少不透明度：不透明度：0；在边缘和不透明度：1；在中心。对于精通javascript/jquery的人来说，可能不会太有挑战性。我已经到处寻找一个脚本，它可以做到这一点，或者非常接近它，但还没有找到一个足够接近我修改

我还有一个问题，至少在Firefox中，悬停图像在第一次被调用时会“轻弹”。我已经尝试了在stackoerflow上可以找到的所有预加载建议，但都不起作用。我发现精灵解决了轻弹问题，但不确定这将如何与我希望的图像动画的方式工作。假设非精灵图像是可行的方法，可能如果脚本在光标穿过阈值时以初始不透明度0调用图像的“明亮”版本，它还将隐藏加载的“flick…？”只是猜测。或者，我可以重新设计悬停的版本，使它只是反射器，如果这可以解决所有其他问题

最后，如您所见，符号是一个返回随机页面的按钮。假设我需要解决这个问题的是一个脚本，我可以使用相同的id（#迂回）运行这两个脚本，还是该脚本使用类名？（我显然是一个小知识是危险的例子。）

不管怎样，这是我得到的

。绕行框{
位置：相对位置；
宽度：100%；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#绕道{
位置：绝对位置；
背景：透明url(https://sodyot.com/wp-content/uploads/2021/03/detour-sign_3.png)无重复中心；
背景大小：100%；
剪辑路径：多边形（48%0%，49%1%，50%0%，69%19%，81%31%，94%42%，100%48%，100%49%，85%65%，76%75%，63%88%，53%99%，52%100%，48%97%，37%87%，28%79%，16%67%，8%59%，049%，3%45%，14%35%，28%20%）；
宽度：300px；
高度：295px；
}
#绕道：悬停{
背景：透明url(https://sodyot.com/wp-content/uploads/2021/03/detour-sign_3on.png)无重复中心；
背景大小：100%；
光标：指针；
}

---

通过更改

src

或

背景图像

值，无法在同一元素上从一个图像转换到另一个图像。但是，您可以同时拥有两个图像，并在默认情况下隐藏其中一个

隐藏一个图像可能会在图像之间淡入淡出或交叉淡出。将它们放置在彼此的顶部，隐藏图像位于顶部，并在悬停时显示隐藏图像

通过更改

不透明度

值，顶部的图像现在可以淡入。使用

转换

属性可以控制转换

。绕行框{
位置：相对位置；
宽度：100%；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#绕道{
位置：绝对位置；
显示：网格；
网格模板：1fr/1fr；
剪辑路径：多边形（48%0%，49%1%，50%0%，69%19%，81%31%，94%42%，100%48%，100%49%，85%65%，76%75%，63%88%，53%99%，52%100%，48%97%，37%87%，28%79%，16%67%，8%59%，049%，3%45%，14%35%，28%20%）；
宽度：300px；
高度：295px；
光标：指针；
}
#绕道{
网格面积：1/1/2/2；
宽度：100%；
身高：100%；
}
#绕道：最后一个孩子{
不透明度：0；
过渡：不透明度250ms缓进缓出；
z指数：1；
}
#迂回：悬停图像：最后一个孩子{
不透明度：1；
}

---

如果我们在绕行标志上打孔，我们只需要一张图像

背景图像可以有一个线性渐变，其颜色会随着鼠标移动而改变。在这段代码中，颜色始终是灰色，逐渐变为白色，并根据鼠标的y移动而改变。将其更改为同时考虑x是很容易的。背景可能有一个真正的梯度，以产生不同的效果-这取决于想要什么效果

JS根据与中心的距离改变CSS变量-col

函数makeColor（d）{
d=数学楼层（d）；
返回“rgb（“+d+”、“+d+”、“+d+”）”；//也可以使用rgba获得不透明度
}
const detour=document.getElementById（“detour”）；
常数dimCol=128//将其设置为初始（关闭）r、g和b灰色
setProperty（'--col'，makeColor（dimCol））；
detour.addEventListener（'mouseout'，函数（）{
setProperty（'--col'，makeColor（dimCol））；
});
addEventListener（'mousemove'，function（）{
const rect=detour.getBoundingClientRect（）；//如果有窗口大小调整函数，则该函数应位于窗口大小调整函数中
常数h=rect.height；//同上
const y=event.clientY-rect.top；//同上
常数距离y=数学绝对值（y-h/2）/h；
常数d=255*（1-2*距离）；
setProperty（'--col'，makeColor（dimCol+（d*（255-dimCol）/255））；
});
。绕行框