图片无法完全左移求助：使用requestAnimationFrame()实现遇阻

嘿，我来帮你搞定这个图片没法完全左移的问题！从你给出的代码片段来看，目前只写了基础的CSS布局，缺少关键的JavaScript动画逻辑——这大概率就是你达不到预期效果的原因。下面我针对两种常见场景给出具体解决方案：

场景1：移动页面背景图 #

如果你的目标是让html/body上的背景图完全左移出视野，可以通过修改background-position属性结合requestAnimationFrame实现平滑动画：

<!DOCTYPE html>
<html>
<head>
  <title>Moving Screen Saver</title>
  <style>
    html, body {
      background-image: url("https://s14.postimg.cc/jei3ov2nl/moon_bg.png");
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      height: 100%;
      width: 100%;
      margin: 0;
      overflow: hidden; /* 隐藏溢出部分，避免出现滚动条 */
    }
  </style>
</head>
<body>
  <script>
    let positionX = 0;
    const body = document.body;

    function animateBackground() {
      // 每次向左移动2px，数值越大动画速度越快
      positionX -= 2;
      // 当背景图完全移出左侧时（位置小于负的视口宽度），可选择停止或重置循环
      if (positionX <= -window.innerWidth) {
        // 若要循环播放，就重置位置到右侧
        // positionX = window.innerWidth;
        // 若要停止动画，就取消帧请求
        // cancelAnimationFrame(animationId);
        // return;
      }
      // 更新背景位置
      body.style.backgroundPosition = `${positionX}px 0`;
      // 继续下一帧动画
      requestAnimationFrame(animateBackground);
    }

    // 启动动画
    const animationId = requestAnimationFrame(animateBackground);
  </script>
</body>
</html>

场景2：移动独立的图片元素 #

如果你是想让一个单独的<img>元素完全左移，需要给图片设置绝对定位，这样才能自由调整它的位置：

<!DOCTYPE html>
<html>
<head>
  <title>Moving Screen Saver</title>
  <style>
    html, body {
      background-color: #000;
      position: relative;
      height: 100%;
      width: 100%;
      margin: 0;
      overflow: hidden;
    }
    .moving-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <img class="moving-img" src="https://s14.postimg.cc/jei3ov2nl/moon_bg.png" alt="Moon Background">
  <script>
    const img = document.querySelector('.moving-img');
    let positionX = 0;

    function animateImage() {
      positionX -= 2;
      // 当图片完全移出左侧（left值小于负的图片自身宽度）
      if (positionX <= -img.offsetWidth) {
        // 可选：重置位置实现循环，或者停止动画
        // positionX = window.innerWidth;
        // cancelAnimationFrame(animationId);
        // return;
      }
      img.style.left = `${positionX}px`;
      requestAnimationFrame(animateImage);
    }

    const animationId = requestAnimationFrame(animateImage);
  </script>
</body>
</html>

关键注意事项 #

• 一定要给父容器加overflow: hidden，不然图片移出视野后会出现滚动条，影响视觉效果。
• 动画终止条件要准确：背景图的终止位置是-window.innerWidth，独立图片是-img.offsetWidth，这样才能确保图片完全移出左侧视野。
• 如果需要循环播放动画，在达到终止条件时把positionX重置为视口宽度（比如window.innerWidth），图片就会从右侧重新进入视野。

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