当前位置:首页 > 程序&理念 >

CountUp.js – 让数字以非常有趣的动画方式显示

时间:2016-04-06 23:54:42浏览:3063 本站原创

CountUp.js 无依赖的、轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 startVal 和 endVal 参数判断的。



演示地址:http://inorganik.github.io/countUp.js/

信息总数:32406条
会员总数:24745个
社区总帖数:71条
<script language="JavaScript" type="text/JavaScript" src="countUp.min.js"></script>
<script type="text/javascript">
var options = {
	useEasing : true,
	useGrouping : true,
	separator : ',',
	decimal : '.',
	prefix : '',
	suffix : ''
};

var demo = new CountUp("myTargetElement", 0, 32406, 0, 2.5, options);
var demo2 = new CountUp("myTargetElement2", 0, 24745, 0, 2.5, options);
var demo3 = new CountUp("myTargetElement3", 0, 71, 0, 2.5, options);

demo.start();
demo2.start();
demo3.start();
</script>
当然,实际使用中得加上滚动条判断,记得先引用jquery


$(window).scroll(function(){
if($(window).scrollTop()>=600){
demo.start();
demo2.start();
demo3.start();
}
})



上一篇:手机拍的居然这么漂亮
下一篇:移动页面自适应手机屏幕宽度

发表评论

昵称:  验证码:

关于博主

博主

博主:BlueCode

职业:web程序

简介:2002年开始一直从事Web制作,网站运营,会PHP+MYSQL ASP+MSSQL,微信开发