文字跑马灯

最新推荐文章于 2025-04-07 08:30:00 发布

new code Boy

最新推荐文章于 2025-04-07 08:30:00 发布

阅读量133

点赞数 3

文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_46344419/article/details/144400847

版权

// html
<div class="marquee-container">
  <div class="marquee-text">这是一段需要滚动显示的文本内容～</div>
</div>

// css
.marquee-container {
  width: 200px; /* 容器宽度 */
  overflow: hidden; /* 内容超出时隐藏 */
}
 
.marquee-text {
  white-space: nowrap; /* 内容不换行 */
  display: inline-block;
}
 
.marquee-text-animation {
  animation: marquee 5s linear infinite; /* 滚动动画，时间可根据需要调整 */
}
 
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

// javascript
// 获取文本容器
const container = document.querySelector(".marquee-container");
const text = document.querySelector(".marquee-text");
 
// 判断文本内容是否超出容器宽度
if (text.getBoundingClientRect().width > container.clientWidth) {
  text.classList.add("marquee-text-animation"); // 添加滚动样式
} else {
  text.classList.remove("marquee-text-animation"); // 移除滚动样式
}