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

四:效果(上面代码实现效果类似下图滚动方式)

 

posted @ 2022-05-12 14:53  慕雪琳鸢  阅读(414)  评论(0)    收藏  举报