数字滚动特效 vue.js

数字滚动特效

css

.container {
  margin: 100px auto;
}
.container div {
  display: block;
  height: 60px;
}

.sumAll{
  height: 22px;
  background-color: transparent;
}

html

<div class="sumAll"></div>

js 方法

numCss(className, endValue) {
      function gScrollNumber(el, option) {
        this.container = $(el);
        this.option = option;
        this.container.css({
          position: "relative",
          padding: "0",
          overflow: "hidden",
        });
        var height = this.container.height();
        this.subWidth = option.width;
        this.subHeight = height;
        this.autoSizeContainerWidth = option.autoSizeContainerWidth;
        this.background = option.background;
        this.col =
          '<span class="g-num-item" style="top: 0;">' +
          "<i>0</i>" +
          "<i>1</i>" +
          "<i>2</i>" +
          "<i>3</i>" +
          "<i>4</i>" +
          "<i>5</i>" +
          "<i>6</i>" +
          "<i>7</i>" +
          "<i>8</i>" +
          "<i>9</i>" +
          "<i>.</i>" +
          "</span>";
      }
      gScrollNumber.prototype.run = function (value) {
        //  console.log("old = " + this.currentValue + "\nnew = " + value);
        this.currentValue = value;
        var self = this;
        var valueString = value.toString();
        if (self.autoSizeContainerWidth) {
          self.container.css({
            width: valueString.length * self.subWidth + "px",
          });
        }
        var oldLength = self.container.children(".g-num-item").length;

        if (valueString.length > oldLength) {
          for (var i = 0; i < valueString.length - oldLength; i++) {
            self.container.append(self.col);
            self.container
              .children(".g-num-item")
              .eq(oldLength + i)
              .css({
                right: self.subWidth * (oldLength + i) + "px",
              });
          }
        } else if (valueString.length < oldLength) {
          for (var i = 0; i < oldLength - valueString.length; i++) {
            self.container.children(".g-num-item:last").remove();
          }
        }
        $(".g-num-item").css({
          position: "absolute",
          width: self.subWidth + "px",
          height: 11 * self.subHeight + "px",
        });
        $(".g-num-item i").css({
          width: self.subWidth + "px",
          height: self.subHeight + "px",
          lineHeight: self.subHeight + "px",
          textAlign: "center",
          fontSize: self.option.fontSize + "px",
          color: self.option.color,
          display: "block",
          fontStyle: "normal",
          background: self.background, //梁涛新增background属性
        });
        setTimeout(function () {
          if (
            valueString.length !== self.container.children(".g-num-item").length
          ) {
            console.log("%c%s", "color:red;", "数字位数和数字条个数不相等");
            debugger;
          }
          for (var i = 0; i < valueString.length; i++) {
            var y = 0;
            if (valueString[i] != ".") {
              y = -(parseInt(valueString[i]) * self.subHeight);
            } else {
              y = -(10 * self.subHeight);
            }
            // console.log(self.container.attr("class") + " / " + self.container.attr("id") + " : " +valueString);
            self.container
              .children(".g-num-item")
              .eq(valueString.length - i - 1)
              .css({
                top: y + "px",
                transition: "top 1.0s",
              });
          }
        }, 0);
      };
      gScrollNumber.prototype.getCurrentValue = function () {
        return this.currentValue;
      };
      // ".scroll-number-0"
      const configData = {
        width: 20, // 每个数字元素的宽
        color: "#fff", // 数字元素的字体颜色
        fontSize: 19, // 数字元素的字体大小
        autoSizeContainerWidth: true, // 自动计算容器宽度 .scroll-number-0 ，如果已经使用css 制定了容器的宽度，此处可设置为false
        background: "transparent",
      };
      var scrollNumber0 = new gScrollNumber(className, configData);
      var value0;
      value0 = 0;
      scrollNumber0.run((value0 += endValue));
    },

使用

this.numCss(’.sumAll’, 1235l)