JavaScript实现动态一行文字水平滚动

可以使用CSS的动画和JavaScript来实现一行文字水平滚动的效果。

首先，在HTML中定义一个容器，用于包含要滚动的文字：

<div class="scroll-container">
  <span class="scroll-text">这是要滚动的文字</span>
</div>

然后，在CSS中定义容器和文字的样式，并通过动画将文字向左移动：

.scroll-container {
  overflow: hidden;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 10s linear infinite;
}

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

最后，在JavaScript中通过获取容器和文字的宽度，来动态设置动画持续时间和延迟时间，以确保文字在容器内完全显示并且不会过快或过慢地滚动：

const container = document.querySelector('.scroll-container');
const text = document.querySelector('.scroll-text');

const duration = text.offsetWidth / 50;
const delay = duration / 2;

text.style.animationDuration = `${duration}s`;
text.style.animationDelay = `-${delay}s`;

container.addEventListener('mouseenter', () => {
  text.style.animationPlayState = 'paused';
});

container.addEventListener('mouseleave', () => {
  text.style.animationPlayState = 'running';
});

上述代码中，我们使用了`mouseenter`和`mouseleave`事件来暂停和恢复动画，以便用户可以停止文字的滚动并阅读完整的内容。

完整的代码示例可以参考下面的代码片段：

const container = document.querySelector('.scroll-container');
const text = document.querySelector('.scroll-text');

const duration = text.offsetWidth / 50;
const delay = duration / 2;

text.style.animationDuration = `${duration}s`;
text.style.animationDelay = `-${delay}s`;

container.addEventListener('mouseenter', () => {
  text.style.animationPlayState = 'paused';
});

container.addEventListener('mouseleave', () => {
  text.style.animationPlayState = 'running';
});

.scroll-container {
  overflow: hidden;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 10s linear infinite;
}

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

<div class="scroll-container">
<span class="scroll-text">这是要滚动的文字，这是要滚动的文字，这是要滚动的文字，这是要滚动的文字，这是要滚动的文字，这是要滚动的文字，这是要滚动的文字，这是要滚动的文字，这是要滚动的文字，这是要滚动的文字。</span>
</div>