實現數字滾動效果

效果

下載並引入所需插件

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 });