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鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
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
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
js 学习笔记(三)
2009/12/29 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
浅谈Python中的继承
2020/06/19 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
保护环境建议书100字
2014/05/13 职场文书
2014年维稳工作总结
2014/11/18 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers