JS实现图片鼠标跟随视差效果：悬停标题显示图片随光标移动

基础问题修正 #

你当前的纯CSS :hover 实现只能渲染全屏固定背景，无法响应鼠标位置变化，同时代码存在重复id、冗余空标签的问题，先做基础调整：

• 删除所有重复id属性（同一页面内id必须唯一，重复会导致JS选择器失效）
• 移除CSS中通过:hover控制图片显示的规则，显示/隐藏、位置移动逻辑交给JS实现
• 删除HTML中无意义的空img标签和空占位div，背景层通过JS动态生成更易维护

调整CSS样式 #

保留原有标题基础样式，新增背景层通用样式，添加过渡动画让移动效果更顺滑：

.hover-text {
  color: black;
  text-align: center;
  font-size: 50px;
  letter-spacing: 5px;
  line-height: 80px;
  font-family: Odachi, sans-serif;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.hover-text:hover {
  color: red;
}

/* 悬停显示的图片层通用样式 */
.hover-bg {
  display: none;
  position: fixed;
  width: 400px; /* 可自行调整图片显示尺寸 */
  height: 250px;
  background-size: cover;
  background-position: center;
  pointer-events: none; /* 避免图片层阻挡鼠标触发标题事件 */
  z-index: 1;
  transform: translate(-50%, -50%); /* 默认让图片中心对齐光标 */
  transition: transform 0.12s ease-out; /* 过渡时长越高，跟随延迟感越强 */
}

/* 分别绑定两个标题对应的背景图，可自行替换图片地址 */
.hover-bg.bg1 {
  background-image: url(https://th.bing.com/th/id/R.1084082127f8d9d45194657db272109e?rik=6tKaSe%2b57Mvvkg&riu=http%3a%2f%2fimages.freehdw.com%2f510%2f3d-abstract_widewallpaper_fulfill-wish_50806.jpg&ehk=Tlkf5BUKl0223C4FgHOuHAHIe5tedec%2bWhkhyj5tHyI%3d&risl=&pid=ImgRaw&r=0);
}
.hover-bg.bg2 {
  background-image: url(https://awallpaperaday.com/wp-content/uploads/2019/03/orange-cliffs-1920x1080-1860x1046.jpg);
}

编写JS交互逻辑 #

代码逻辑非常适合初学者理解，总共分三步：监听鼠标进入显示图片、监听鼠标移动更新图片位置实现视差、监听鼠标离开隐藏图片：

// 获取页面所有标题元素
const hoverTitles = document.querySelectorAll('.hover-text');
// 视差系数，取值0-1，数值越小图片移动速度越慢、视差层次感越强
const parallaxIntensity = 0.3;

hoverTitles.forEach((title, index) => {
  // 动态创建当前标题对应的背景图片层
  const bgLayer = document.createElement('div');
  bgLayer.classList.add('hover-bg', `bg${index + 1}`);
  document.body.appendChild(bgLayer);

  // 鼠标移入标题区域：显示对应图片
  title.addEventListener('mouseenter', () => {
    bgLayer.style.display = 'block';
  });

  // 鼠标在标题区域移动：更新图片位置，实现跟随+视差效果
  title.addEventListener('mousemove', (e) => {
    // 获取当前光标相对于浏览器视口的坐标
    const mouseX = e.clientX;
    const mouseY = e.clientY;
    // 计算视差偏移量：图片移动距离 = 光标移动距离 * 视差系数
    const offsetX = (mouseX - window.innerWidth / 2) * (parallaxIntensity - 1);
    const offsetY = (mouseY - window.innerHeight / 2) * (parallaxIntensity - 1);
    // 赋值图片位置
    bgLayer.style.left = `${mouseX}px`;
    bgLayer.style.top = `${mouseY}px`;
    bgLayer.style.transform = `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px))`;
  });

  // 鼠标移出标题区域：隐藏对应图片
  title.addEventListener('mouseleave', () => {
    bgLayer.style.display = 'none';
  });
});

简化后的HTML结构 #

移除冗余标签后的结构如下，直接替换原有代码即可：

<div class="module-jamf">
  <a class="jamf-container" target="_blank" rel="noopener">
    <center>
      <p class="hover-text">TITLE1</p>
    </center>
  </a>
</div>

<div class="module-jamf">
  <a class="jamf-container" target="_blank" rel="noopener">
    <center>
      <p class="hover-text">TITLE2</p>
    </center>
  </a>
</div>

效果调优参考 #

• 调整parallaxIntensity数值可改变视差强度，0.2-0.5区间效果比较自然
• 修改.hover-bg的width/height属性可调整显示图片的大小
• 修改transition的时长可改变跟随手感：数值越小跟手性越强，数值越大漂浮感越强
• 如果需要给更多标题加对应图片，只需要新增对应.hover-bg.bg序号的CSS规则绑定图片地址即可，JS会自动给所有带.hover-text类的标题绑定效果

内容的提问来源于stack exchange，提问作者Archies Shedge