數字展現變化滾動效果

1、背景

最近在工做開發中須要用到一個數字滾動的效果，首先定位有個效果就好，滾動速度不須要嚴格的把控。最後的成品效果就是如下醬紫：

再放一個demo版的圖，你萌感覺一下：

總之，就是這樣了。

2、技術儲備

一、jquery animate方法的使用

二、js的數組操做 parseInt charAt方法等等

3、代碼

一、css部分

<style type="text/css">
  .box{
    height: 44px;
    position: absolute;
    overflow: hidden;
    top: 50%;
    margin-top: -20px;
    margin-left: -30px;
    left: 50%;
  }
  .box span{
    display: inline-block;
     background-image: -webkit-gradient(linear,0 0,0 bottom,from(#fef637),to(#f90));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 30px;
    height: 44px;
    font-size: 44px;
    line-height: 44px;
  }
  .box .sign-box span{
    width: 15px;
  }
  .box .digit-container{
    width: 30px;
    text-align: center;
    overflow: hidden;
    font-size: 0;
  }
  .l{
    float: left;
  }
</style>

 

二、html部分

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

　　

三、js部分（用的jquery）

<script type="text/javascript">
$(function(){
  var lastnum = "410,134.12",lastarr = "";
  var Event = {
    // 例 510,085.00
    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);
          console.log(scrollTop);
      });
    }
  };
  var final_arr = Event.number('510,085.12');
  $(".js-box").html(Event.dom(final_arr));
  Event.animation();
});
</script>

　

4、over！