jquery數字滾動動畫使用leoTextAnimate.js外掛
阿新 • • 發佈:2022-05-12
一:引用檔案
<script src="js/jquery-1.9.1.js"></script> <script src="js/jquery.leoTextAnimate.js"></script>
二: Dom頁面使用
<div class="fr section2_lr"> <ul> <li> <div class="xbt"><span class="num" data-num="515">515</span>家</div> <div class="xms">年度服務企業</div> </li> <li> <div class="xbt"><span class="num" data-num="508">508</span>億元</div> <div class="xms">年度服務貿易額</div> </li> <li> <div class="xbt"><span class="num" data-num="980">980</span>萬單</div> <div class="xms">年度服務跨境電商單量</div> </li> </ul> </div>
三:js檔案中使用
$('.section2_lr ul li').each(function(index,el){ $(el).find('.num').leoTextAnimate({ delay: 1000, //延時出現時間 autorun: true, //是否自動執行 fixed:[',',':','.','-','~'," "], start:'0', }); })
四:效果(上面程式碼實現效果類似下圖滾動方式)