在一个数据展示的页面,达到数字滚动显示的效果。
html结构:
<div id="num_1">0</div>
<div id="num_2" class="num">0</div>
<div id="num_3" class="num">0</div>
js部分:
$(document).ready(function(){
var num_count_1 = 123456789;
$('#num_1').text(Math.ceil(num_count_1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
//animate滚动
var num_count_2 = 2535473;
var num_count_3 = 37590254;
$('#num_2').html(num_count_2).hide().fadeIn();
$('#num_3').html(num_count_3).hide().fadeIn();
$('.num').each(function () {
$(this).prop('counter',0).animate({
counter: $(this).text()
}, {
duration: 1500,
easing: 'swing',
step: function (now) {
now = Math.ceil(now);
now = now.toString();
now = now.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
$(this).text(now);
}
});
});
});
网友评论