js实现数字滚动，插件jquery.counterup.min.js的使用方式

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

使用方式

1. 首先引入jQuery.js
2. 引入 jquery.waypoints.js (点击下载)监听页面滚动事件
3. 引入jquery.counterup.js (点击下载)数字动画插件
4. 在需要的滚动的数字上添加class类名counter作为数字的容器
5. 在页面添加js代码，$('.counter').countUp();
   就这个样就可以实现数字从零到指定数值了，话不多说上代码~

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.waypoints.min.js"></script>
<script src="./js/jquery.countup.min.js"></script>
<style>
    .content{
    
    
        display: flex; justify-content: space-between; align-items: center;
        padding: 100px;
        margin: auto;
        height: 200vh;
    }
    span{
    
    
        font-size: 40px;
    }
</style>
<div class="content">
    <span class="counter">20</span>
    <span class="counter">100</span>
    <span class="counter">500</span>
</div>
<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>