jquery轻量级数字动画插件countUp.js使用详解


Posted in jQuery onOctober 17, 2019

CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画。

该JS插件下载地址

展示效果:

jquery轻量级数字动画插件countUp.js使用详解

详细代码示例:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>jquery轻量级数字动画插件</title>
 
 <!-- 该特效该引入的js插件 -->
 <script type="text/javascript" src="./jQuery数字动画特效_files/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="./jQuery数字动画特效_files/countUp.min.js"></script>
 </head>
 <body>
 
 <h1 id="num1"></h1>
 <h1 id="num2"></h1>
 <h1 id="num3"></h1>
 
 <script type="text/javascript">
  var options = {  
   useEasing: true, // 使用缓和
    useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
    separator: ',', // 分隔器(千位分隔符,默认为',')
    decimal: '.', // 十进制(小数点符号,默认为 '.')
    prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,¥ 等)
    suffix: '' // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等) 
  };
  $(function() {
  // CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参数六)
  // 参数一: 数字所在容器
  // 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长
  // 参数三: 数字增长后的最终值,该值一般通过异步请求获取
  // 参数四: 数字小数点后保留的位数
  // 参数五: 数字增长特效的时间,此处为3秒
  // 参数六: 其他配置项
  // 注: 参数六也可不加,其配置项则为默认值
  
  new CountUp("num1", 0, 1380, 0, 3, options).start();
  new CountUp("num2", 0, 1380, 2, 3, options).start();
  new CountUp("num3", 0, 1380, 4, 3, options).start();
  });
 </script>
 
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
You might like
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python清空文件并替换内容的实例
2018/10/22 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python烟花效果的代码实例
2020/02/25 Python
如何把python项目部署到linux服务器
2020/08/26 Python
商务日语毕业生自荐信
2013/11/23 职场文书
广告语设计及教案
2014/03/21 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
公司年夜饭通知
2015/04/25 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
MySQL常见优化方案汇总
2022/01/18 MySQL
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python