在做公司的运营报告页面时，有一个数字累计增加的动画效果，一开始，毫无头绪，不知如何下手，于是上网查资料，发现大多都是用的插件来实现的，那么今天，我也来用插件jquery.animateNumber.js来实现一个不一样的数字动画效果吧，也等于是做个笔记吧。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{margin:0;padding:0;}
.platform_data{color:#e24f48;font-size:26px;margin-left:50px;}
.f_size {color:#2d3e50;font-size:18px;}
</style>
</head>
<body>
<p><label class="platform_data" id="income_money"></label><span class="f_size">元</span></p>
<p><label class="platform_data" id="income_num"></label><span class="f_size">笔</span></p>
<p><label class="platform_data" id="income_day"></label><span class="f_size">天</span></p>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.animateNumber.js"></script>
<script>
/**
* 格式化金额-中文
* @param s
* @param n
*/
function fmoneyCN(s,n){
n = n >= 0 && n <= 20 ? n : 2;
s = parseFloat((s + "").replace(/[^d.-]/g, "")).toFixed(n) + ""; //精度
var l = s.split(".")[0].split(""),
r = s.split(".")[1], //remind
t = "";
var CN_TEN_THOUSAND = "<span class='f_size'>万</span>";
var CN_HUNDRED_MILLION = "<span class='f_size'>亿</span>";
if(l.length < 5){
return s;
}
for(i = 0; i < l.length; i ++ )
{
if(i == (l.length - 9)){
t += l[i] + CN_HUNDRED_MILLION + "";
}else if( i == (l.length - 5)){
t += l[i] + CN_TEN_THOUSAND + "";
}else {
t += l[i];
}
}
return t.split("").join("");
}
$('#income_money').animateNumber({
number: "901394152" ,
numberStep: function(now, tween) {
var target = $(tween.elem);
target.prop('number', now).html(fmoneyCN(now,0));
}
},3000);
$('#income_num').animateNumber({
number: "47007" ,
numberStep: function(now, tween) {
var target = $(tween.elem);
target.prop('number', now).html(fmoneyCN(now,0));
}
},3000);
$('#income_day').animateNumber({
number: "1200" ,
numberStep: function(now, tween) {
var target = $(tween.elem);
target.prop('number', now).html(fmoneyCN(now,0));
}
},3000);
</script>
</body>
</html>
最终效果如下图：
源代码下载案例:
好用的jquery.animateNumber.js数字动画插件