数字展示变化滚动效果

一、背景

最近在工作开发中需要用到一个数字滚动的效果，首先定位有个效果就好，滚动速度不需要严格的把控。最后的成品效果就是以下酱紫：

再放一个demo版的图，你萌感受一下：

总之，就是这样了。

二、技术储备

1、jquery animate方法的使用

2、js的数组操作 parseInt charAt方法等等

三、代码

1、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>

 

2、html部分

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

　　

3、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>

　

四、over！

转载于:https://www.cnblogs.com/zhiying/p/8085802.html