js数字滚动效果

1、css代码

.scroll-nums {
	box-sizing:border-box;
	width:100%;
	height:200px;
	text-align:center;
	padding-top:50px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
.scrollNums,.scrollNums2 {
	width:100%;
	margin:25px;
}
.number-animate {
	line-height:45px;
	height:45px;
	font-size:40px;
	overflow:hidden;
	display:inline-block;
	position:relative;
}
.number-animate .number-animate-dot {
	width:21px;
	float:left;
	text-align:center;
}
.number-animate .number-animate-dom {
	width:27px;
	text-align:center;
	float:left;
	position:relative;
	top:0;
}
.number-animate .number-animate-dom span,.number-animate .number-animate-dot span {
	float:left;
	width:100%;
	height:45px;
	line-height:1.1;
}
.scrollNums .number-animate .number-animate-dom {
	background:#ab0003;
	color:#fff;
	border-left:1px solid #fff;
}
.scrollNums2 .number-animate .number-animate-dom {
	background:#222;
	color:yellow;
	border-left:1px solid #fff;
}

2、html代码

<div class="scroll-nums">
	<div class="scrollNums"></div>
	<div class="scrollNums2"></div>
</div>

3、js插件

const scrollNums = (function(win,doc) {
  class scrollNumsFn {
    constructor(x, y) {
      this.setting = {
          len : null, //默认最小位数
          speed : 1000,//动画速度
          num : "", //初始化值
          symbol : '',//默认的分割符号，千，万，千万
          dot : 0 ,//保留几位小数点 
          zero : true
      }
      this.$parent = doc.querySelector(x);
      this.html = `<div class="number-animate-dom" data-num="{{num}}">
            <span class="number-animate-span">0</span>
            <span class="number-animate-span">1</span>
            <span class="number-animate-span">2</span>
            <span class="number-animate-span">3</span>
            <span class="number-animate-span">4</span>
            <span class="number-animate-span">5</span>
            <span class="number-animate-span">6</span>
            <span class="number-animate-span">7</span>
            <span class="number-animate-span">8</span>
            <span class="number-animate-span">9</span>
            <span class="number-animate-span">0</span>
            <span class="number-animate-span">.</span>
          </div>`;
      this.extend( this.setting, y );
      this.init(this.$parent,y)
    }
    init (x,y){
      x.innerHTML =  this.setNumDom(this.numToArr(this.setting.num))
      this.animate(x);
    };
    animate ($parent){//执行动画
      let $dom = $parent.querySelectorAll( '.number-animate-dom' );
      for(let o of $dom ){
        let num = o.getAttribute('data-num');
        if(this.setting.zero) num = (num==0?10:num);
        this._height = o.offsetHeight/12;  
        o.style['transform'] = o.style['-webkit-transform'] = 'translateY(' + (num=="." ? -11 * this._height  : -num * this._height)+'px)';
        o.style['transition'] = o.style['-webkit-transition'] = (num=="." ?  0 : this.setting.speed/1000)+'s'
      }
    }
    setNumDom (arrStr){//分割符号
      let shtml = '<div class="number-animate">';
      arrStr.forEach((o,i)=>{
        if(i != 0 && (arrStr.length-i)%3 == 0 && this.setting.symbol != "" && o!="."){
            shtml += '<div class="number-animate-dot"><span>'+this.setting.symbol+'</span></div>'+this.html.replace("{{num}}",o);
        }else{
            shtml += this.html.replace("{{num}}",o);
        }
      });
      shtml += '</div>';
      return shtml;
    }
    update (num){
      let newArr = this.numToArr(num),$dom = this.$parent.querySelectorAll(".number-animate-dom");
      if($dom.length != newArr.length){
        this.$parent.innerHTML = this.setNumDom(this.numToArr(num))
      }else{
        ;[].forEach.call($dom,(o,i)=>{
            o.setAttribute('data-num',newArr[i]);
        });
      }
      this.animate(this.$parent);
    }
    numToArr (num){
      num = parseFloat(num).toFixed(this.setting.dot);
      let arrStr = typeof(num) == 'number' ? num.toString().split("") : num.split("")
      let arrLen = arrStr.length;
      if(arrStr.length <=this.setting.len){
        for(let _lens = 0;_lens<this.setting.len - arrLen;_lens++){
          arrStr.unshift(0)
        }
      }
      return arrStr;
    }
    extend (n,n1){ 
      for(let i in n1){n[i] = n1[i]};
    }
  }
  return scrollNumsFn;
})(window,document);

4、方法引用

//这是避免代码在合并压缩时产生错误，所以在代码开始部分就先写上；会比较保险
;(function(){
	var num = 1234567,num2 = 8872
	var scrollNums1 = new scrollNums('.scrollNums',{
		num : num
	});
	var scrollNums2 = new scrollNums('.scrollNums2',{
		num : num2
	});
	setInterval(()=>{
		num +=15,scrollNums1.update(num);
		num2 +=4,scrollNums2.update(num2);
	},2000)
})();

本文链接：http://so.lmcjl.com/news/9152/