如何实现图片容器随鼠标位置左右偏移的交互效果

要实现图片根据鼠标在容器内的位置左右偏移的效果，仅靠CSS无法完成——CSS无法获取鼠标在容器内的具体坐标，必须结合JavaScript实现。以下是完整解决方案：

第一步：调整CSS布局 #

先修正容器和图片的定位方式，确保图片能自由偏移：

/* Planets Styles */
.space-container {
  position: relative;
  width: 100vw; /* 可替换为固定宽度，比如800px */
  height: 60vh; /* 必须设置明确高度，否则无法触发鼠标事件 */
  overflow: hidden;
}

.center-image {
  position: absolute;
  width: 15%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 保持居中 */
  transition: transform 0.1s ease-out; /* 平滑过渡动画 */
}

.star-image, .surrounding-image {
  position: absolute;
  width: 15%;
  /* 可给每个星星/行星设置初始位置，比如：top: 20%; left: 10%; */
  transition: transform 0.1s ease-out;
}

关键调整说明： #

• 给.space-container设置position: relative，作为内部绝对定位元素的参考容器
• 所有图片设为position: absolute，才能通过transform自由偏移
• 容器必须有明确高度，确保鼠标能在有效区域触发事件
• 添加过渡动画让移动更自然

第二步：添加JavaScript逻辑 #

通过监听容器的mousemove事件，计算鼠标位置并调整图片偏移：

const container = document.querySelector('.space-container');
const parallaxImages = container.querySelectorAll('img[data-speed]');

container.addEventListener('mousemove', (e) => {
  // 计算鼠标在容器内的相对X位置（范围0-1）
  const mouseRelativeX = (e.clientX - container.offsetLeft) / container.offsetWidth;
  // 最大偏移幅度，可根据需求调整
  const maxShift = 20;

  parallaxImages.forEach(img => {
    // 获取图片的速度系数
    const speed = parseFloat(img.dataset.speed);
    // 计算偏移量：鼠标越偏右，偏移量根据速度系数变化
    const shiftX = (mouseRelativeX - 0.5) * maxShift * speed;
    // 应用偏移
    img.style.transform = `translateX(${shiftX}px)`;
  });

  // 中心图片轻微反向移动，增强视差层次感
  const centerImg = container.querySelector('.center-image');
  const centerShift = (mouseRelativeX - 0.5) * maxShift * -0.5;
  centerImg.style.transform = `translate(-50%, -50%) translateX(${centerShift}px)`;
});

// 鼠标离开容器时，重置所有图片位置
container.addEventListener('mouseleave', () => {
  parallaxImages.forEach(img => {
    img.style.transform = '';
  });
  const centerImg = container.querySelector('.center-image');
  centerImg.style.transform = 'translate(-50%, -50%)';
});

代码说明： #

1. 鼠标位置计算：mouseRelativeX将鼠标位置转换为0-1的相对值，减去0.5后得到-0.5到0.5的范围，方便计算左右偏移方向
2. 速度系数：利用图片上的data-speed属性，正数表示和鼠标同方向移动，负数表示反向移动，数值越大移动幅度越大
3. 平滑过渡：CSS的transition属性让图片移动更顺滑，避免生硬跳动
4. 重置逻辑：鼠标离开容器时，所有图片回到初始位置

第三步：自定义优化 #

• 修改maxShift值可调整整体移动幅度
• 给.star-image和.surrounding-image添加不同的top/left初始值，优化布局
• 调整transition的时长和缓动函数，优化动画手感

内容的提问来源于stack exchange，提问作者Colin Maxwell