js图片发光

基础概念： JS图片发光是一种通过JavaScript和CSS实现的效果，它可以使图片周围产生柔和的光晕，从而增强图片的视觉效果。这种效果通常通过创建一个与图片大小相同的透明遮罩层，并在该遮罩层上应用模糊滤镜和发光效果来实现。

优势：

视觉吸引力：发光效果可以吸引用户的注意力，使图片更加突出。
交互性：可以通过鼠标悬停或其他交互方式触发发光效果，增强用户体验。
灵活性：可以自定义发光的颜色、强度和范围，以适应不同的设计需求。

类型：

静态发光：图片始终带有发光效果。
动态发光：发光效果随时间或用户交互而变化。

应用场景：

网站背景图：为网站的背景图片添加发光效果，提升整体视觉效果。
产品展示：在电商网站或产品展示页面中，使产品图片更加吸引人。
社交媒体：在社交媒体分享的图片上添加发光效果，增加趣味性。

示例代码：以下是一个简单的示例，展示如何使用JavaScript和CSS实现图片发光效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Glow Effect</title>
<style>
  .image-container {
    position: relative;
    display: inline-block;
  }
  .glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: blur(10px) brightness(1.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .image-container:hover .glow {
    opacity: 1;
  }
</style>
</head>
<body>

<div class="image-container">
  <img src="your-image.jpg" alt="Sample Image" width="300">
  <div class="glow"></div>
</div>

</body>
</html>

解释：

HTML结构：包含一个div容器，内部有一个img标签和一个用于发光效果的div。
CSS样式：
- .image-container：设置为相对定位，以便内部的绝对定位元素（发光层）相对于它进行定位。
- .glow：绝对定位，覆盖在图片上，初始透明度为0。使用filter属性添加模糊和亮度效果。
- :hover伪类：当鼠标悬停在图片上时，发光层的透明度变为1，显示发光效果。

常见问题及解决方法：

性能问题：复杂的发光效果可能导致页面性能下降。解决方法包括减少模糊半径、使用硬件加速（如transform: translateZ(0)）或优化图片大小。
兼容性问题：某些旧版浏览器可能不支持CSS滤镜。可以通过检测浏览器特性并提供回退方案来解决。
发光层不显示：确保发光层的尺寸与图片完全匹配，并且没有被其他元素遮挡。

通过以上方法，可以实现一个简单而有效的图片发光效果，提升网页的视觉吸引力和用户体验。