jquery-animateNumber数字动画插件

川长思鸟来 2022-06-12 01:16 160阅读 0赞

# jquery-animateNumber数字动画插件 #

### 实例一、基础动画 ###

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

This plugin only 0 lines of code.
 //JS 代码，请把代码放入script标签内，下面例子相同
 $('#lines').animateNumber({ number: 165 });

### 实例二、数字间显示分隔符 ###

World population is 0.
 var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
 $('#world-population').animateNumber(
 {
 number: 7095217980,
 numberStep: comma_separator_number_step
 }
 );

### 实例三、使用多个属性控制动画 ###

Fun level 0 %.
 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数据的变化 ###

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

### 实例六、带小数位 ###

From $0,00 to $5,00
 // 需要保留的小数位数
 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 ###

10
 
 $('#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'
 );

--------------------