挑战全网跑马灯最简单实现，欢迎来Battle！

2023-10-26 05:29:56

前言

跑马灯是一种常见的动画效果，经常用于网站和应用程序中。它可以用来显示信息、滚动新闻或其他内容。传统上，跑马灯是使用<marquee>标签来实现的，但<marquee>标签已被废弃，因此我们需要使用其他方法来实现跑马灯效果。

使用HTML和CSS实现跑马灯

使用HTML和CSS实现跑马灯最简单的方法是使用<div>和<span>标签。首先，创建一个<div>元素，并为其设置一个固定的宽度和高度。然后，在<div>元素中创建一个<span>元素，并将要滚动的文本内容放入其中。最后，为<span>元素设置一个较大的宽度，并将其定位在<div>元素的左边缘。

<div style="width: 500px; height: 100px; overflow: hidden;">
  <span style="width: 1000px; animation: scroll 10s linear infinite;">
    欢迎来到挑战全网跑马灯最简单实现的Battle！
  </span>
</div>

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-500px);
  }
}

这段代码会创建一个500像素宽、100像素高的<div>元素，并在其中创建一个1000像素宽的<span>元素。<span>元素的内容将从右向左滚动，滚动速度为每秒100像素，并一直循环滚动。

使用JavaScript实现跑马灯

使用JavaScript实现跑马灯的原理与使用HTML和CSS实现类似，但更灵活。首先，创建一个<div>元素，并为其设置一个固定的宽度和高度。然后，使用JavaScript创建一个<span>元素，并将要滚动的文本内容放入其中。最后，使用JavaScript设置<span>元素的宽度和位置，并使其从右向左滚动。

<div id="marquee" style="width: 500px; height: 100px; overflow: hidden;"></div>

const marquee = document.getElementById('marquee');
const span = document.createElement('span');
span.textContent = '欢迎来到挑战全网跑马灯最简单实现的Battle！';
span.style.width = '1000px';
marquee.appendChild(span);

const scroll = () => {
  span.style.transform = `translateX(${span.offsetLeft - 1}px)`;
  if (span.offsetLeft + span.offsetWidth < 0) {
    span.style.transform = `translateX(0)`;
  }
  requestAnimationFrame(scroll);
};

requestAnimationFrame(scroll);