js 实现图片向上滚动的平滑动画效果

最新推荐文章于 2026-04-08 07:41:09 发布

原创

最新推荐文章于 2026-04-08 07:41:09 发布 · 1k 阅读

标签

#javascript #开发语言 #前端 #动画

收录于

本文介绍如何在HTML中创建一个600px的固定高度容器，实现图片向上滚动，滚动过程中平滑过渡，使用requestAnimationFrame控制滚动速度，并在滚动完成后自动删除最上方图片，提升性能。

详细描述：

创建一个 600px 的固定容器，添加一些图片，实现图片向上滚动，滚动完成后，删除最上面的图片。（平滑效果、滚动速度）

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动动画</title>
  <style>
    .container {
      height: 600px;
    }

    img {
      display: block;
      height: 600px;
    }
  </style>
</head>

<body>

  <script>
    // 创建一个固定高度的图片滚动容器
    const container = document.createElement('div');
    container.classList.add('container');

    // 将容器添加到 DOM 树中
    document.body.appendChild(container);

    // 创建图片元素
    function createImgElement(src) {
      const img = document.createElement("img");
      img.src = src;
      return img;
    }

    // 生成图片元素并添加到容器中
    const imgs = [
      createImgElement("img1.jpg"),
      createImgElement("img2.jpg"),
      createImgElement("img3.jpg"),