用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（）;

 

}）