求助：用CSS和jQuery实现鼠标相对背景图位置固定的移动效果

这个问题的核心是让鼠标始终对准背景图上的同一个位置，你之前的百分比计算没有考虑背景图与窗口的尺寸差，所以导致定位偏差。下面是正确的实现思路和代码：

核心逻辑分析 #

背景图比窗口大，我们需要先算出背景图可移动的「总范围」——也就是背景图超出窗口的部分：

• 横向可移动距离 = 背景图宽度 - 窗口宽度
• 纵向可移动距离 = 背景图高度 - 窗口高度

然后根据鼠标在窗口中的相对位置比例（0~1之间），让背景图反向移动对应比例的距离，这样鼠标就能始终锁定背景图上的同一点。

完整代码实现 #

CSS 基础设置 #

确保背景图用绝对定位，覆盖整个窗口：

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px; /* 示例：背景图宽度大于窗口 */
  height: 1600px; /* 示例：背景图高度大于窗口 */
}

JavaScript 逻辑 #

// 缓存尺寸变量，避免重复计算
let winWidth, winHeight, bgWidth, bgHeight, moveRangeX, moveRangeY;

// 更新尺寸信息（初始化+窗口resize时调用）
function updateSize() {
  winWidth = $(window).width();
  winHeight = $(window).height();
  bgWidth = $('.bg').width();
  bgHeight = $('.bg').height();
  
  // 计算背景图可移动的总范围
  moveRangeX = bgWidth - winWidth;
  moveRangeY = bgHeight - winHeight;
}

// 初始化尺寸
$(document).ready(updateSize);
// 窗口大小变化时重新计算
$(window).resize(updateSize);

// 鼠标移动事件处理
$(document).mousemove(function(e) {
  // 计算鼠标在窗口中的相对比例（0到1）
  const mouseRatioX = e.pageX / winWidth;
  const mouseRatioY = e.pageY / winHeight;
  
  // 计算背景图的偏移量（负号表示反向移动）
  const offsetX = -mouseRatioX * moveRangeX;
  const offsetY = -mouseRatioY * moveRangeY;
  
  // 应用偏移到背景图
  $('.bg').css({
    transform: `translate(${offsetX}px, ${offsetY}px)`
  });
});

为什么原来的方法不对？ #

你之前的代码e.pageX / $(window).width() *100是把鼠标位置转换成窗口的百分比，但这个百分比直接用于背景图定位时，没有考虑背景图比窗口大的事实。比如背景图宽度是窗口的2倍，鼠标在窗口中间（50%位置），背景图需要向左移动自身宽度的25%才能让鼠标对准背景图的中间点，而不是直接用窗口的50%比例。

用上面的代码，当你指向背景图上的某个字母时，不管怎么移动鼠标，这个字母都会始终停留在鼠标指针下。

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