纯js 实现 大屏数字滚动效果

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44781409/article/details/99308312

大屏数字滚动效果来源于最近工作中一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果，以下是最终实现的效果：

所需素材

直接上代码
HTML部分

<div>
    <ul class="box">
      <li
        :class="{'number-item': !isNaN(item) }"
        v-for="(item,index) in computeNumber"
        :key="index"
      >
        <span v-if="!isNaN(item)" id="Number">
          <i ref="numberItem">0123456789</i>
        </span>
        <span v-else class="dou">{{item}}</span>
      </li>
    </ul>
  </div>

js部分

export default {
  data() {
    return {
      computeNumber: ["0", "0", "0", "0", "0", "9", "1", "7"]
    };
  },
  created() {},
  methods: {
    // 定时增长数字
    increaseNumber() {
      let self = this;
      this.timer = setInterval(() => {
        self.newNumber = self.newNumber + getRandomNumber(1, 100);
        self.setNumberTransform();
      }, 3000);
    },
    // 设置每一位数字的偏移
    setNumberTransform() {
      let numberItems = this.$refs.numberItem;
      let numberArr = this.computeNumber.filter(item => !isNaN(item));
      for (let index = 0; index < numberItems.length; index++) {
        let elem = numberItems[index];
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
      }
    }
  },
  mounted() {
    this.increaseNumber();
  }
};

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

css部分

<style lang="less" scoped>
.box {
  overflow: hidden;
  > li > .dou {
    display: inline-block;
    font-size: 30px ;
    height: 60px;
    line-height: 80px;
    color: #ff6744;
  }
  li {
    float: left;
  }
}
.number-item {
  width: 35px;
  background: url("../../static/img/STP大屏img/2019072915351069.png") no-repeat
    center center;
  height: 45px;
  background-size: 100% 100%;
  float: left;
  overflow: hidden;
  margin: 0 2px;

  & > span {
    position: relative;
    display: inline-block;
    // margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
    color: #ff6744;
    font-size: 40px;
    & > i {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 0.5s ease-in-out;
      letter-spacing: 10px;
    }
  }
}
</style>