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
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
html中两种获取标签内的值的方法
Jun 16 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生成Excel文档的简单方法
2014/06/12 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
Python创建xml的方法
2015/03/10 Python
python之信息加密题目详解
2019/06/26 Python
keras得到每层的系数方式
2020/06/15 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
毕业自荐书
2013/12/09 职场文书
英语商务邀请函范文
2014/01/16 职场文书
2014政务公开实施方案
2014/02/19 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
大学生求职计划书
2014/04/30 职场文书
兽医医药专业求职信
2014/07/27 职场文书
冰峪沟导游词
2015/02/09 职场文书
表扬信格式模板
2015/05/05 职场文书
《风筝》教学反思
2016/02/23 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书