快速创建显示数字数据的动画——CountUp.js
程序员文章站
2022-07-03 09:26:44
由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画。 使用需引入countUp.js文件,以下例子还引用了jquery.js countUp.js文件地址 ......
由于项目需求,需要写一个数字增/减量的动画特效,最后找到了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:其他选项配置
上一篇: notepad怎么修改默认的搜索引擎?
下一篇: 低光传感器:飓风逃不过它的眼睛