欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

快速创建显示数字数据的动画——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:其他选项配置