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

    框架中提供了多种数据注释以便可以全面的描述数据库结构特性. 自增列 可以使用注释声明指定列是数据库自增列,同时能指定自增的起始及步长. public class Blog { [Identity(, ...

  2. SpringBoot单元测试中的测试方法执行顺序

    一.忽略方法@ignore 二.执行顺序@FixMethodOrder(MethodSorter.JVM) 我们在执行JUnit测试用例时,有时需要按照定义顺序执行单元测试方法,比如如在测试数据库相关 ...

  3. NHibernate从入门到精通系列(1)——NHibernate概括

    内容摘要 NHibernate简介 ORM简介 NHibernate优缺点 一.NHibernate简介 什么是?NHibernate?NHibernate是一个面向.NET环境的对象/关系数据库映射 ...

  4. NetSNMP开源代码学习——小试牛刀

    原创作品,转载请注明出处,严禁非法转载.如有错误,请留言! email:40879506@qq.com 题外话:技术越是古董级的东西,越是值得学习. 一. 配置 参考: http://www.cnbl ...

  5. SpringMVC(四)：@RequestMapping结合org.springframework.web.filter.HiddenHttpMethodFilter实现REST请求

    1)REST具体表现: --- /account/1  HTTP GET       获取id=1的account --- /account/1  HTTP DELETE 删除id=1的account ...

  6. python的调试

    调试 程序能一次写完并正常执行的概率很小.总会有各种各样的bug需要修正. 有的bug很简单,看看错误信息就知道,有的bug很复杂,我们需要知道出错时 哪些变量的值是正确的,哪些变量的值是错误的,因此 ...

  7. 00-深入理解C#读书笔记说明

    带着问题去看书 尝试着,根据每一小节,先列出大纲.然后根据自己原先的认知和理解以及不理解,对每一个小的chapter,我会先自我提问,带着问题去阅读,然后把我的理解以及不理解记录下来,对于错误的地方做 ...

  8. MongoDB 分片集群搭建

    一.概述 分片是一种在多台机器上分配数据的方法.MongoDB使用分片来支持具有非常大的数据集和高吞吐量操作.有两种解决系统增长的方法:垂直扩展和水平扩展. 垂直扩展涉及增加单个服务器的容量,例如使用 ...

  9. X5 Blink下文字自动变大

    在X5 Blink中,页面排版时会主动对字体进行放大,会检测页面中的主字体,当某一块的字体在我们的判定规则中,认为字体的字号较小,并且是页面中的主要字体,就会采用主动放大的操作.这显然不是我们想要的. ...

  10. [LeetCode] Self Dividing Numbers 自整除数字

    A self-dividing number is a number that is divisible by every digit it contains. For example, 128 is ...