【JS】轻量级数字动画插件countUp.js
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");
页:
[1]