简单无缝滚动 js案例

最新推荐文章于 2025-05-09 13:03:49 发布

原创最新推荐文章于 2025-05-09 13:03:49 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前端全栈开发专栏收录该内容

207 篇文章

订阅专栏

下面是一个简单的无缝滚动的JavaScript案例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        width: 200px;
        height: 200px;
        overflow: hidden;
      }

      #content {
        width: 400px;
        height: 200px;
        white-space: nowrap;
        animation: scroll 10s linear infinite;
      }

      #content:hover {
        animation-play-state: paused;
      }

      @keyframes scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-200px);
        }
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo semper tellus, vel tempus elit rutrum ac. Suspendisse eget efficitur lorem. Proin eget orci sem. Curabitur laoreet purus sed leo facilisis, nec feugiat lorem fermentum. Sed auctor, tellus vel consectetur consectetur, leo tellus efficitur lectus, a vulputate eros orci et justo.
      </div>
    </div>
  </body>
</html>

在这个案例中，我们使用了CSS的animation属性来实现滚动效果。通过transform属性的translateX函数来实现水平滚动的效果。在关键帧动画中，我们定义了从0%到100%的滚动效果，并配合animation属性的infinite参数来实现无限循环滚动。通过设置animation-play-state属性为paused，当鼠标悬停在滚动内容上时，动画会暂停。

这个案例中的滚动内容是一个div元素，它的宽度是400px，比外部容器的宽度200px要大。通过设置overflow属性为hidden，我们隐藏了内容超出容器的部分，实现了无缝滚动的效果。

你可以将这段代码复制到一个HTML文件中，然后在浏览器中打开，就能看到无缝滚动的效果。