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= style=>
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)
.text(now);
}
}
);
实例五、定义动画数字的开始数据，下面实例定义的是从10到100数据的变化
<p
id=
"ten">From ten
to hundred.</p>
$('
.
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) {
floored_number = floored_number.toFixed(decimal_places);
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'
);
