vue2实现简易跑马灯

最新推荐文章于 2024-01-16 11:35:51 发布

Stevetagelian

最新推荐文章于 2024-01-16 11:35:51 发布

阅读量270

点赞数

文章标签： vue.js javascript css3

本文链接：https://blog.csdn.net/Stevetagelian/article/details/127889762

版权

vue2实现简易跑马灯

<template>
  <div class="outBox" ref="outBox">
    <div class="innerBox" ref="innerBox">
      <span>1111111111111111111111111</span>
      <span>2222222222222222222222222</span>
      <span>3333333333333333333333333</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeId: null,
    };
  },
  mounted() {
    this.moveLeft();
  },
  beforeDestroy() {
    clearInterval(this.timeId);
  },
  methods: {
    moveLeft() {
      let scrollLen = 0;
      //最大的移动距离
      const maxScrollLen =
        this.$refs.outBox.clientWidth + this.$refs.innerBox.clientWidth;
      this.timeId = setInterval(() => {
        if (scrollLen > maxScrollLen) {
          //超过移动距离，元素要回归到初始状态
          this.$refs.innerBox.style = `transform: translateX(100%);`;
          scrollLen = 0;
        }
        scrollLen += 0.5;
        //元素的初始位移状态就是外层盒子的宽度
        this.$refs.innerBox.style = `transform: translateX(${
          this.$refs.outBox.clientWidth - scrollLen
        }px);`;
      }, 60 / 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.outBox {
  // 设置flex来让innerBox的宽度为内容宽度
  display: flex;
  height: 50px;
  background-color: beige;
  overflow: hidden;
  .innerBox {
    height: 100%;
    display: flex;
    align-items: center;
    transform: translateX(100%);
    span {
      margin-right: 50px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>