jquery数字增加动画特效

示例1:简单的动画$('#lines').animateNumber({ number: 165 });示例2:分隔符var comma_separator_number_step=$.animateNumber.numberStepFactories.separator(',')$('#world-population').animateNumber( { number: 7095217980, numberStep: comma_separator_number_step });示例3:多个属性var percent_number_step = $.animateNumber.numberStepFactories.append(' %')$('#fun-level').animateNumber( { number: 100, color: 'green', 'font-size': '30px', easing: 'easeInQuad', numberStep: percent_number_step }, 15000);示例4:自定义号码步骤处理程序$('#points').animateNumber( { number: 72, numberStep: function(now, tween) { var target = $(tween.elem); target .prop('number', now) // keep current prop value .text(now); }, 'slow' });示例5:自定义动画起始点$('#ten') .prop('number', 10) .animateNumber( { number: 100 }, 20000 );示例6:小数var decimal_places = 2;var decimal_factor = decimal_places === 0 ? 1 : decimal_places * 10;$('#decimals') .animateNumber( { number: 5 * decimal_factor, numberStep: function(now, tween) { var floored_number = Math.floor(now) / decimal_factor, target = $(tween.elem); if (decimal_places > 0) { // force decimal places even if they are 0 floored_number = floored_number.toFixed(decimal_places); // replace '.' separator with ',' floored_number = floored_number.toString().replace('.', ','); } target.text('$' + floored_number); } }, 20000 );例7:反向倒计时$('#revese-countdown') .prop('number', 10) .animateNumber( { number: 0, numberStep: function(now, tween) { var target = $(tween.elem), rounded_now = Math.round(now); target.text(now === tween.end ? 'Launch!' : rounded_now); } }, 10000, 'linear' );

在线演示        积分下载        6毛下载        砍两刀下载