文字滚动（vue）

最新推荐文章于 2024-03-19 16:24:18 发布

.234.

最新推荐文章于 2024-03-19 16:24:18 发布

阅读量215

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_71893746/article/details/130996386

版权

效果：

html代码：

         <div id="wrap" class="wrap">
            <div class="box">
              <p class="txt">
                收到<span style="color:red">钟汉</span>的离职申请已超过20天，请尽快处理；收到<span style="color:red">江浩</span>的离职申请已超过20天，请尽快处理；<span style="color:red">陈兰</span>已离职超过10天，请尽快结算薪酬；
              </p>
              
            </div>
          </div>

css代码：

// 文字滚动
.wrap {
  /* border: 1px solid #000; */
  font-size: 14px;
  color: #333;
  padding: 5px;
  // 强制不换行
  white-space: nowrap;
  overflow: hidden;
  width: 500px;
}

.box {
  width: 1200px;
  overflow: hidden;
}

.box p {
  display: inline-block;
}

js代码：

data() {
    return {
      wrap: "",
      box: "",
      p: "",
    };
  },

 mounted() {
    this.wrap = document.getElementById("wrap");
    this.box = wrap.getElementsByTagName("div")[0];
    this.p = document.getElementsByTagName("p")[0];
    this.fun();
  },

  methods: {
    // 文字滚动
    fun() {
      // offsetWidth返回一个元素的局部宽度
      if (this.wrap.offsetWidth > this.p.offsetWidth) {
        return false;
      }
      this.box.innerHTML += this.box.innerHTML;
      setTimeout(this.fun1, 50);
    },
    fun1() {
      if (this.wrap.offsetWidth > this.wrap.scrollLeft) {
        this.wrap.scrollLeft++;
        setTimeout(this.fun1, 15);
      } else {
        setTimeout(this.fun2, 50);
      }
    },
    fun2() {
      this.wrap.scrollLeft = 0;
      this.fun1();
    },
}