当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 快速创建显示数字数据的动画——CountUp.js

快速创建显示数字数据的动画——CountUp.js

2018年04月20日  | 移动技术网IT编程  | 我要评论

由于项目需求，需要写一个数字增/减量的动画特效，最后找到了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：其他选项配置

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网