博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
快速创建显示数字数据的动画——CountUp.js
阅读量:4612 次
发布时间:2019-06-09

本文共 1104 字,大约阅读时间需要 3 分钟。

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

 

转载于:https://www.cnblogs.com/ztf511/p/8883703.html

你可能感兴趣的文章
MacOS 系统终端上传文件到 linux 服务器
查看>>
Excel导出POI
查看>>
兼容性
查看>>
第三方框架----FMDB的使用
查看>>
C# 堆栈和堆 Heap & Stack
查看>>
自动执行sftp命令的脚本
查看>>
linux下非root用户安装python
查看>>
Web Service Error wsse:InvalidSecurity Policy Requires Integrity (Doc ID 1370736.1)
查看>>
MySQL
查看>>
Android 使用全局变量 (转)
查看>>
XCODE中为单独的文件设置不支持ARC的方法
查看>>
android01
查看>>
前后端渲染的区别
查看>>
mahout驱动类
查看>>
Ext.MessageBox<转>
查看>>
Fabric基础架构原理(二)
查看>>
CSS:CSS 颜色名
查看>>
JDBC 连接数据库的步骤
查看>>
前端利器Emmet
查看>>
学习scalaenv
查看>>