【JS】轻量级数字动画插件countUp.js

admin

https://inorganik.github.io/countUp.js/
https://developer.aliyun.com/article/274033
countup.js 的简单使用_LeungZhenPang的博客-CSDN博客_countup.js

发现一个缺陷，对象选择只能支持ID
示例：Demo.220828
DIV:
<div class="axis py-5">
    <div class="row text-center">
            <div class="col"><h1 id="c1">21000</h1><div>厂房面积21000平米</div></div>
            <div class="col"><h1 id="c2">35.21</h1><div>占地35.21亩</div></div>
            <div class="col"><h1 id="c3">17</h1><div>拥有专利17项</div></div>
            <div class="col"><h1 id="c4">4700</h1><div>4700多条品控工艺</div></div>
    </div>
</div>

JS
$.getScript(path + "countUp.min.js", function () {
    $(".axis .col").each(function () {
        var options = {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
        };
        var countUp = new CountUp($("h1", this).attr("id"), 0, $("h1", this).html(), $("h1", this).html().lastIndexOf("."), 2.5, options);
        var last = $(window).scrollTop();
        var h = $(window).height();
        var axis_top = $(".axis").offset().top;
        var axis_h=$(".axis").outerHeight();
        console.log(axis_h);
        $(window).scroll(function (e) {
            if (last < axis_top - h) {
                countUp.reset();
                if ($(window).scrollTop() > axis_top - h) {
                    countUp.start();
                }
            }
            if(last > axis_top + axis_h) {
                countUp.reset();;
                if ($(window).scrollTop() < axis_top + axis_h + h) {
                    countUp.start();
                }
            }
            last = $(window).scrollTop();
        })
    });
})
Hondy.js自带
//DivDom：计数动画的最外围DOM，比如：UL，支持Class
//CounterDiv：需要调用数字所在的每个列，比如：LI，支持Class
//DIVNumber：紧靠数字DOM，必须有ID属性值。，比如：A，仅支持ID，这是一个缺陷，需要优化CountUp.JS。
var countUp = function (OuterDiv, CounterDiv, NumberDiv)
调用方法优化后：countUp(".axis", ".col", "h1");