1. 程式人生 > 其它 >jquery數字滾動動畫使用leoTextAnimate.js外掛

jquery數字滾動動畫使用leoTextAnimate.js外掛

一:引用檔案

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

四:效果(上面程式碼實現效果類似下圖滾動方式)