我在JQuery上使用了两个函数。
第一个是计数器(View here),第二个用于在Div位于窗口中心时启动计数器。
计数器
JS:
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 3000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
HTML:
<div class="counter" data-count="10000">0</div>
https://jsfiddle.net/a52e24Ls/
*
*
滚动检测
JS:
$(window).scroll(function() {
startCounter();
});
$(window).load(function(){
startCounter();
});
function startCounter(){
$('.contributorTitle').each(function(i) {
var bottom_of_object = $(this).position().top + ($(this).outerHeight()/2);
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (bottom_of_object < bottom_of_window){
}
});
}
我想,我把JS计数器放在
中if (bottom_of_object < bottom_of_window){
}
但它不起作用。我希望计数器开始,窗口是中心。