jquery数字动画插件jquery.animateNumber.js

jq数字动画插件-jquery.animateNumber.js，可以实现数字的动画显示效果，比如从1跑到36500，从1%跑到100%类似这样的效果，数字动画效果控制多样，非常不错。
jquery.color.min.js并不是必须的，您可以删除，Example 3演示了使用jquery.color.min.js来达到数字由红到绿的变色

引入js文件：
<script type='text/javascript' src='http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.7.0.min.js'></script>
<script src="jquery.color.min.js"></script>
<script src="jquery.animateNumber.js"></script>

下面是jquery.animateNumber调用演示说明

Example 1: 基础动画效果

<p>This plugin only <span id="lines">0</span> lines of code.</p>$('#lines').animateNumber({ number: 165 });

This plugin only 0 lines of code.

Example 2: 数字间显示分隔符

<p>World population is <span id="world-population">0</span>.</p>var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')$('#world-population').animateNumber({number: 7095217980,numberStep: comma_separator_number_step});

World population is 0.

Example 3: 使用多个属性控制动画

<p>Fun level <span id="fun-level" style="color: red;">0 %</span>.</p>var percent_number_step = $.animateNumber.numberStepFactories.append(' %')$('#fun-level').animateNumber({number: 100,color: 'green','font-size': '30px',easing: 'easeInQuad',numberStep: percent_number_step},15000);

Fun level 0 %.

Example 4: 自定义数字步阶处理方法（句柄）

<p>Points per pixel <span id="points">0</span>.</p>$('#points').animateNumber({number: 72,numberStep: function(now, tween) {var target = $(tween.elem);target.prop('number', now) // keep current prop value.text(now);},'slow'});

Points per pixel 0.

Example 5: 定义动画数字的开始数据，下面实例定义的是从10到100数据的变化

<p id="ten">From ten to hundred.</p>$('#ten').prop('number', 10).animateNumber({number: 100},20000);

From ten to hundred.

Example 6: 带小数位

<p id="decimals">From $0,00 to $5,00</p>// how many decimal places allowsvar decimal_places = 2;var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);$('#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 0floored_number = floored_number.toFixed(decimal_places);// replace '.' separator with ','floored_number = floored_number.toString().replace('.', ',');}target.text('$' + floored_number);}},20000);

From $0,00 to $5,00

Example 7: 倒计时，以下代码为从10倒数到0

<p id="revese-countdown">10</p>$('#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');

Example 8: 动画以后回调

<p id="countdown">10</p>$('#countdown').animateNumber({number: 10},'normal',function() {$('#countdown').text('Countdown completed!')});

Example 9: 选中复选框动画

<p><label><input type="checkbox" id="checkbox"> use max power</label><br>Power: <span id="power">10</span>%</p><script type="text/javascript">var numberStep = function(now, tween) {var target = $(tween.elem),rounded_now = Math.round(now);target.prop('number', rounded_now).text(rounded_now);};var use_max_power = $('#checkbox');use_max_power.click(function(){if ( use_max_power.is(':checked') ) {$('#power').stop().animateNumber({number: 100,numberStep: numberStep}, 5000);}else {$('#power').stop().animateNumber({number: 10,numberStep: numberStep}, 5000);}});</script>

use max power
Power: 10%

Example 10: 从占位符0到有数字的动画

<p>Signatures gathered: <span id="signatures">000000</span><br><button id="start-campaign">Start campaign</button></p><script type="text/javascript">var max_number = 100000;var padding_zeros = '';for(var i = 0, l = max_number.toString().length; i < l; i++) {padding_zeros += '0';}var padded_now, numberStep = function(now, tween) {var target = $(tween.elem),rounded_now = Math.round(now);var rounded_now_string = rounded_now.toString()padded_now = padding_zeros + rounded_now_string;padded_now = padded_now.substring(rounded_now_string.length);target.prop('number', rounded_now).text(padded_now);};var use_max_power = $('#checkbox');$('#start-campaign').click(function(){$('#signatures').animateNumber({number: max_number,numberStep: numberStep}, 5000);});</script>