有谁知道当您滚动到特定的父 ID(如#counter-container)时如何启动数字计数器动画
HTML:
<div id="counter-container">
<span class="count">6,000</span>
<span class="count">600</span>
<span class="count">60</span>
</div>
查询:
$(window).scroll(startCounter);
function startCounter() {
if ($(window).scrollTop() > 200) {
$(window).off("scroll", startCounter);
$('.count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text().replace(/,/g, '') }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(commaSeparateNumber(Math.floor(this.Counter)));
},
complete: function() {
$this.text(commaSeparateNumber(this.Counter));
//alert('finished');
}
});
});
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
}
return val;
}
}
}