技術標籤：javascriptcsshtmljqueryhtml5

數字滾動效果

• 效果
• • 下載並引入所需外掛
  • Html程式碼
  • css程式碼
  • JS程式碼

效果

下載並引入所需外掛

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