好用的jquery.animateNumber.js数字动画插件

在做公司的运营报告页面时，有一个数字累计增加的动画效果，一开始，毫无头绪，不知如何下手，于是上网查资料，发现大多都是用的插件来实现的，那么今天，我也来用插件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数字动画插件

posted @ 2017-12-27 14:33  豫见世家公子  阅读(622)  评论(0)  编辑  收藏  举报