使用animation实现文字无限横向滚动_animation判断滚动速度-CSDN博客

本文链接：https://blog.csdn.net/Tracy_frog/article/details/115442055

本文介绍了一个需求，当文字长度超过容器宽度时，利用CSS3和JavaScript实现匀速无缝横向滚动效果。同时，通过监听resize事件并结合防抖函数throttle，确保在窗口大小变化时能自动调整滚动状态。

摘要由CSDN通过智能技术生成

需求

若文字长度不超过容器宽度，则不滚动，反之滚动（复制一遍文字，让滚动无缝衔接）。
匀速滚动（运动时间 = 路程 / 速度）。
监听resize事件，结合防抖throttle，触发后重新计算是否需要滚动。

实现

<template>
<div>
  <div class="notice" ref="container">
    <p ref="notice">{
  {notice}}</p>
  </div>
</div>
</template>
<script>
import { throttle } from '@/utils'
export default {
  data () {
    return {
      defaultTxt: '测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试。。。。。测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试。。。。。测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试。。。。。测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试。。。。。测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试测试环境用于测试。。。。。',
      notice: ''
    }