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 allows
    var 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 0
    floored_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'
    );

10

Example 8: 動畫之後回調

<p id="countdown">10</p>

    $('#countdown')
    .animateNumber(
    {
    number: 10
    },
    'normal',
    function() {
    $('#countdown').text('Countdown completed!')
    }
    );

0

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>

Signatures gathered: 000000