PHP中使用jQuery实现滚动切换图片功能失效问题排查

核心问题：PHP循环生成的逻辑完全错误 #

你用PHP循环生成了从i=30到i=2500的所有if-else判断，这会导致两个致命问题：

• 逻辑覆盖：代码顺序执行时，当滚动距离在30~2499区间内，前面的if会先把图片设为char1.png，但后续更大i对应的else会立刻把图片改回char2.png，最终只有scrollTop >=2500时才显示char1.png，完全达不到切换图片模拟移动的效果。
• 性能极差：每次滚动都会执行2470次判断，严重拖慢页面响应速度。

其他小问题 #

• CSS中.bgimg的width:50%后缺少分号，虽浏览器可能容错，但不符合语法规范。
• 角色图片未设置定位，滚动时会随页面一起滚动，无法模拟“在道路上移动”的视觉效果。

修正后的实现方案 #

思路 #

通过JavaScript计算滚动位置，每隔固定像素切换一次角色图片，同时限制只在道路背景的滚动区域内生效，还可根据滚动进度调整角色水平位置，增强移动真实感。

完整代码 #

HTML

<div class="container" style="text-align: center;">
  <div class="row">
    <p>This is a test </p>
  </div>
  <div class="row bgimg">
    <img src="char1.png" id="chara">
  </div>
</div>

CSS

.bgimg {
  background-image: url('road.png');
  height: 2500px;
  background-size: cover;
  width: 50%;
  position: relative;
  margin: 0 auto;
}

#chara {
  position: fixed;
  bottom: 20px;
  left: 25%; /* 对应.bgimg的50%宽度，初始在道路左侧 */
  transition: left 0.1s; /* 平滑移动过渡 */
}

JavaScript（jQuery）

$(document).ready(function() {
  const $chara = $("#chara");
  const $bgimg = $(".bgimg");
  const bgimgHeight = $bgimg.height();
  const bgimgTop = $bgimg.offset().top;
  const bgimgBottom = bgimgTop + bgimgHeight;
  const windowHeight = $(window).height();
  const charWidth = $chara.width();
  const roadWidth = $bgimg.width();
  const maxLeft = roadWidth - charWidth;
  const switchStep = 50; // 每滚动50像素切换一次图片

  $(window).on("scroll", function() {
    const scrollPos = $(this).scrollTop();
    
    // 只在道路区域内生效
    if (scrollPos < bgimgTop || scrollPos > bgimgBottom - windowHeight) {
      $chara.attr("src", "char1.png");
      return;
    }

    // 计算滚动进度，调整角色水平位置
    const scrollProgress = (scrollPos - bgimgTop) / (bgimgHeight - windowHeight);
    $chara.css("left", `${25 + (scrollProgress * maxLeft / roadWidth) * 50}%`);

    // 切换角色图片，模拟行走动画
    const frame = Math.floor((scrollPos - bgimgTop) / switchStep) % 2;
    $chara.attr("src", frame === 0 ? "char1.png" : "char2.png");
  });
});

代码说明 #

1. 定位处理：给角色图片设置fixed定位，固定在视野底部，同时根据滚动进度调整left值，模拟沿道路移动的效果。
2. 区域限制：判断滚动位置是否在道路背景的可见范围内，超出区域时恢复默认图片。
3. 图片切换：通过滚动距离除以步长取余数，实现每隔固定像素切换一次图片，模拟行走的帧动画。
4. 性能优化：缓存DOM元素和尺寸值，避免滚动时重复查询DOM，提升响应速度。

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