用jQuery实现数字滚动效果

html 部分

 <div  class="js-box box"></div>

css 部分

.statistic .box{
  display: inline-block;
  height: 25px;
  overflow: hidden;
  position: relative;
  top: 5px;
}

.statistic .box span{
  display: inline-block;
   background-color: #C90907;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 12px;
  height: 25px;
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
}
.statistic .box .sign-box span{
  width: 12px;
}
.statistic .box .digit-container{
  width: 12px;
  text-align: center;
  overflow: hidden;
  font-size: 0;
}
.l{
  float: left;
}

js 部分

$(function() {
var numstr = "666"
var Event = {
                number: function (digit) {
                    var num_arr = [];
                    for (var i = 0; i < digit.length; i++) {
                        num_arr.push(digit.charAt(i));
                    }
                    return num_arr;
                },
                dom: function (arr) {
                    var str = '';
                    for (var i = 0; i < arr.length; i++) {
                        if (parseInt(arr[i]) >= 0) {
                            str += '<div class="l js-l-box digit-container" data-show=' + arr[i] + '>\
                  <span>0</span>\
                  <span>1</span>\
                  <span>2</span>\
                  <span>3</span>\
                  <span>4</span>\
                  <span>5</span>\
                  <span>6</span>\
                  <span>7</span>\
                  <span>8</span>\
                  <span>9</span>\
                </div>';
                        } else {
                            str += '<div class="sign-box l"><span>' + arr[i] + '</span></div>';
                        }
                    }
                    return str;
                },
                animation: function () {
                    var height = $(".js-box").height();
                    $(".js-l-box").each(function (i) {
                        var num = parseInt($(this).data("show"));
                        var scrollTop = 0;
                        var scrollTop = height * num;
                        $(this).css("margin-top", 0);
                        $(this).animate({
                            marginTop: -scrollTop
                        }, 1500);
                    });
                }
            };

 var num = Event.number(numstr);
 $(".js-box").html(Event.dom(num));
 Event.animation();
})