滚动上的动画计数器
Animated Counter on scroll
所以,我找到了这支很酷的笔 Creative Animated Counter on Scroll,但我想知道如何设置数字的格式,以便在超过 1000 时使用逗号。
function visible(partial) {
var $t = partial,
$w = jQuery(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop) && $t.is(':visible'));
}
$(window).scroll(function() {
if (visible($('.count-digit'))) {
if ($('.count-digit').hasClass('counter-loaded')) return;
$('.count-digit').addClass('counter-loaded');
$('.count-digit').each(function() {
var $this = $(this);
jQuery({
Counter: 0
}).animate({
Counter: $this.text()
}, {
duration: 5000,
easing: 'swing',
step: function() {
$this.text(Math.ceil(this.Counter));
}
});
});
}
})
您要找的方法是toLocaleString
。您可以在数字上调用它来获取您要查找的逗号。您只需要像这样更改步进函数:
step: function() {
$this.text(Math.ceil(this.Counter).toLocaleString());
}
所以,我找到了这支很酷的笔 Creative Animated Counter on Scroll,但我想知道如何设置数字的格式,以便在超过 1000 时使用逗号。
function visible(partial) {
var $t = partial,
$w = jQuery(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop) && $t.is(':visible'));
}
$(window).scroll(function() {
if (visible($('.count-digit'))) {
if ($('.count-digit').hasClass('counter-loaded')) return;
$('.count-digit').addClass('counter-loaded');
$('.count-digit').each(function() {
var $this = $(this);
jQuery({
Counter: 0
}).animate({
Counter: $this.text()
}, {
duration: 5000,
easing: 'swing',
step: function() {
$this.text(Math.ceil(this.Counter));
}
});
});
}
})
您要找的方法是toLocaleString
。您可以在数字上调用它来获取您要查找的逗号。您只需要像这样更改步进函数:
step: function() {
$this.text(Math.ceil(this.Counter).toLocaleString());
}