实现数字滚动效果

效果

下载并引入所需插件

JQuery – 链接: JQuery.
numScroll – 链接: numScroll.

  <script src="./jquery-3.3.1.min.js"></script>
  <script src="./numScroll.js"></script>

Html代码

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

css代码

  .box {
     
      line-height: 24px;
      height: 24px;
      overflow: hidden;
      display: inline-block;
      position: relative;
      margin-top: 2px;
    }

    /* 该样式必须有 */
    .mt-number-animate .mt-number-animate-dom {
     
      width: 11px;
      text-align: center;
      float: left;
      position: relative;
      top: 0;
    }

    /* 该样式必须有 */
    .mt-number-animate .mt-number-animate-dom .mt-number-animate-span {
     
      width: 100%;
      float: left;
    }

JS代码

   var plnum = 368; //幸运数字(不要直接写在页面上)
   //调用numberAnimate方法，传入num（数字）、speed（动画执行时间）
    $('.box').numberAnimate({
      num: plnum, speed: 1000 });