由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js
CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画。
使用需引入countUp.js文件,以下例子还引用了jquery.js
countUp.js文件地址:https://github.com/inorganik/CountUp.js
也可以访问:http://inorganik.github.io/countUp.js/
jquery.js文件地址:http://jquery.com/download/
//选项配置 var options = { useEasing: true, //使用缓动 useGrouping: true, //使用分组 separator: ',', //分隔符 decimal: '.', //小数点 prefix: '', //前缀 suffix: '' //后缀 }; $(document).ready(function() { //创建显示数字数据的动画实例 var demo = new CountUp('count', 0, 334, 2, 2.0, options); if(!demo.error) { //调用开启动画方法 demo.start(); } else { console.error(demo.error); } });
var demo = new CountUp('count', 0, 334, 2, 2.0, options);
创建实例函数参数说明: target:目标元素的id startVal:开始的数字 endVal:结束的数字 decimals:保留小数位数,默认0 duration:动画时长,单位秒,默认2 options:其他选项配置