Jquery-animateNumber数字动画插件

数字过渡 数字动画 数字 animate 数字递增 数字递加


实例一、基础动画


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