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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 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
PHP个人网站架设连环讲(四)
2006/10/09 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
python得到单词模式的示例
2018/10/15 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
爱的承诺书
2015/01/20 职场文书
工作推荐信模板
2015/03/25 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL