时间戳

首页 > 解决方案 > 如何在 Javascript 中使图像无休止地重复滚动？

javascript - 如何在 Javascript 中使图像无休止地重复滚动？

问题描述

我做一个网页只是为了一点乐趣。我希望在第一次加载页面时背景图像无休止地向左滚动。图像在 CSS 中设置为 repeat-x，并且在端到端放置时是无缝的。我写的这段代码是否朝着正确的方向发展？

我希望保留 JS vanilla 只是为了简单起见，但如果 JQuery、CSS 或其他库能更好地处理这个问题，我会全力以赴。

我将非常感谢您的帮助！

我已经在一个简单的 HTML 文档中尝试了一些普通的 JavaScript 代码。到目前为止，我的努力根本没有使图像移动。

document.addEventListener("DOMContentLoaded", function() {
  var y = 0;
  while (true) {
    y -= 1;
    document.getElementById("bgImg").left = y;
  }
})
#bgImg {
  background-image: url("img1.jpg");
  background-repeat: repeat-x;
  width: 100%;
  height: 660px;
  display: inline;
}
<div id="bgImg">
</div>

这只会冻结我的浏览器并且根本不滚动。可能要感谢“while(true)”。

标签： javascripthtmlanimationscrollmotion

解决方案

这最好通过CSS 动画而不是 JavaScript 来完成。whileCSS 关键帧动画旨在以最小的内存开销（并且没有同步循环：P）在预设属性状态之间循环平滑过渡。

您需要包含的唯一附加信息是图像的宽度。如果将此值用作动画状态中的 x 坐标，background-position则to背景一旦经过那么多像素，就会跳回该from位置。如果您正确设置了宽度，则此跳转对查看者是不可见的。

#bg {
  background: url('https://www.gravatar.com/avatar/e47523b278f15afd925a473e2ac0b966?s=120&d=identicon&r=PG&f=1');
  background-repeat: repeat-x;
  width: 240px;
  height: 120px;
  animation: bgScrollLeft 5s linear infinite;
}

@keyframes bgScrollLeft {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -120px 0;
  }
}
<div id="bg"></div>

推荐阅读