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

好用的jquery.animateNumber.js数字动画插件的更多相关文章

  1. js-数字渐增到指定的数字，在指定的时间内完成（有动画效果哦）插件jquery.animateNumber.js

    本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好. 但是,最终效果不理想! Why? 最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个 ...

  2. jquery轻量级数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js  ...

  3. js数字动画

    项目中需要的数字动画效果,网上找不到需要的效果,所以自己写了一个. 不多说,直接上干货:

  4. jQuery页面滚动数字增长插件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery.form.js表单插件的使用

    jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...

  6. jquery.jCal.js显示日历插件

    描述:日历插件jCal用于需要输入日期的表单文本框. 兼容浏览器:IE浏览器/Firefox/Google Chrome 官方链接: http://www.overset.com/2008/05/1 ...

  7. jquery.ajaxfileupload.js

    jquery.ajaxfileupload.js上传插件,利用iframe提交不刷新页面功能完成. /* // jQuery Ajax File Uploader // // @author: Jor ...

  8. jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程

    一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...

  9. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

随机推荐

  1. zipline-benchmarks.py文件改写

    改写原因:在这个模块中的 get_benchmark_returns() 方法回去谷歌财经下载对应SPY(类似于上证指数)的数据,但是Google上下载的数据在最后写入Io操作的时候会报一个恶心的编码 ...

  2. bootstrap——bootstrap-table（2）

    先看问题现象: 问题描述: 点击"管理子账号"按钮,预期是按照传递的参数更新列表数据,但是最后才发现这个列表根本不会刷新,只会继承前一次的数据,意思也就是不会去请求第二次. 解决方 ...

  3. 知物由学 | 基于DNN的人脸识别中的反欺骗机制

    "知物由学"是网易云易盾打造的一个品牌栏目,词语出自汉·王充<论衡·实知>.人,能力有高下之分,学习才知道事物的道理,而后才有智慧,不去求问就不会知道."知物 ...

  4. [LeetCode] Judge Route Circle 判断路线绕圈

    Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...

  5. ASP.NET MVC4通过UrlRewriter配置伪静态,支持html后缀

    参考文章: ASP.NET MVC4通过UrlRewriter配置伪静态 http://blog.csdn.net/just_shunjian/article/details/51132866 .NE ...

  6. [HNOI 2011]数矩形

    Description 题库链接 给出平面上 \(n\) 个点,选出四个点作为矩形顶点.求出矩形最大面积. \(1\leq n\leq 1500\) Solution 转载自 Z-Y-Y-S dark ...

  7. [NOI 2010]超级钢琴

    Description 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙 的音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙 ...

  8. [ZJOI 2007]Hide 捉迷藏

    Description 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条双 ...

  9. 因数（factor）

    一个最基本的算数法则就是大于1的整数都能用1个或多个素数相乘的形式表示出来.当然,有多种质因子排列方案 如: 10=2×5=5×2    20=5×2×2=2×5×2=2×2×5 用f(k)表示k的质 ...

  10. 【BZOJ1951】【SDOI2010】古代猪文

    Background "在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心--" --选自猪王国民歌 很久很 ...