简介

jquery.counterup.js 该插件可以控制动画的延迟时间和动画过渡时间。但它依赖于Waypoints.js插件来监听滚动事件。从而实现页面滚动到数字可视窗口，实现让数字从零到指定数值的滚动。

使用

1.  引入 jQuery.js、jquery.waypoints.js 和 jquery.counterup.js 文件

2.  HTML

<div class="content">
    <span class="counter">20</span>
    <span class="counter">100</span>
    <span class="counter">500</span>
</div>

3. 调用

<script>
    $('.counter').countUp();
</script>

也可以使用data-counter-time和data-counter-delay属性来设置数字动画的动画时间和延迟时间

<div class="content">
    <span class="counter" data-counter-time="5000" data-counter-delay="50">20</span>
    <span class="counter" data-counter-time="5000" data-counter-delay="60">100</span>
    <span class="counter" data-counter-time="5000" data-counter-delay="10">500</span>
</div>