jquery-animateNumber數字動畫插件

jquery-animateNumber數字動畫插件

實例一、基礎動畫

//html代碼，下面例子相同。

<p>This plugin only <span id="lines">0</span> lines of code.</p>
//JS 代碼，請把代碼放入script標籤內，下面例子相同
$('#lines').animateNumber({ number: 165 });

實例二、數字間顯示分隔符

<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
  }
);

實例三、使用多個屬性控制動畫

<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
);

實例四、自定義數字步階處理方法（句柄）

$('#points').animateNumber(
 {
   number: 72,
   numberStep: function(now, tween) {
   var target = $(tween.elem);
   target
    .prop('number', now) // keep current prop value
    .text(now);
   }
 }
);

實例五、定義動畫數字的開始數據，下面實例定義的是從10到100數據的變化

<p id="ten">From ten to hundred.</p>

$('#ten')
   .prop('number', 10)
   .animateNumber(
   {
     number: 100
   },
   20000
);

實例六、帶小數位

<p id="decimals">From $0,00 to $5,00</p>
// 需要保留的小數位數
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
  );

實例七、倒計時，以下代碼爲從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'
 );

---