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

2018-06-24 01:57:34来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue 之 .sync 修饰符

下一篇:关于CSRF的攻击与防御