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

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

该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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • countUp.js实现数字滚动效果

    本文实例为大家分享了countUp.js数字滚动效果展示的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 countup.js countup.js是一个无依赖性.轻量级的javascript类,可用于快速创建动画,以更有趣的方式显示数字/数据.详见countup.js 1.3 countup.js使用 np

  • CountUp.js实现数字滚动增值效果

    数据改动的时候,countUp.js进行数值滚动增加的动态效果,供大家参考,具体内容如下 这是js文件 // target = id of html element or var of previously selected html element where counting occurs // startVal = the value you want to begin at // endVal = the value you want to arrive at // decimals =

  • CountUp.js数字滚动插件使用方法详解

    CountUp.js数字滚动插件使用方法详解

    CountUp.js 是一个轻量级,无依赖的JavaScript类,通过简单的设置就可以达到数字滚动的效果 演示地址: countUp.js 可配置项: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals = 小数位数,默认值是0: duration = 动画延迟秒数,默认值是2: //用法: var options = { useEasing: true, useGrouping: true, separator: ',', de

  • countup.js实现数字动态叠加效果

    countup.js实现数字动态叠加效果

    本文实例为大家分享了countup.js实现数字动态叠加效果的具体代码,供大家参考,具体内容如下 CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 startVal 和 endVal 参数判断的. 再加上滚轮事件判断. 可配置的参数: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals

  • countUp.js实现数字动态变化效果

    本文实例为大家分享了countUp.js实现数字动态变化的具体代码,供大家参考,具体内容如下 countUp.js官网:演示地址 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字增长效果</title> </head> <body> <h1 id="num1&q

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

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

    CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址 展示效果: 详细代码示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轻量级数字动画插件</title> <!-- 该特效该引入的js插件 --> <

  • jQuery用户头像裁剪插件cropbox.js使用详解

    几乎每一个网页是必备图片上传,图片裁剪功能,这里通过cropbox.js插件实现该功能. <script src="js/jquery-1.11.1.min.js"></script> <script src="js/cropbox.js"></script> <script type="text/javascript"> $(window).load(function() { var

  • jQuery表单校验插件validator使用方法详解

    jQuery表单校验插件validator使用方法详解

    validator插件:将jquery实现的常用操作进行封装,我们只需要学会插件的使用语法,就可以使用简单的代码实现较为复杂的功能. validator的基本使用 1. 需要引入的文件 ① jQuery类库 ② 插件的js文件 官网 2.表单校验插件validator的基本语法 在rules中通过校验规则名称使用校验规则 ,在messages中定义该规则对应的错误提示信息. <!-- 需要引入的文件 --> <script src="../lib/jquery.js"

  • jQuery html表格排序插件tablesorter使用方法详解

    tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件: <script type="text/javascript" src="../jquery-latest.js"></script> <script type="

  • 移动端日期插件Mobiscroll.js使用详解

    移动端日期插件Mobiscroll.js使用详解

    mobiscroll js日期插件的基础入门案例,移动端开发过程中可能会用到. <html> <head> <meta charset="UTF-8"> <title>mobiscroll</title> <link type="text/css" rel="stylesheet" href="../js/mobiscroll.custom-2.6.2.min.css&q

  • jquery表单验证插件validation使用方法详解

    jquery表单验证插件validation使用方法详解

    一.如何使用 引入js文件 <script src="jquery.js"></script> <script src="jquery.validate-1.13.1.js"></script> 编写html页面,这里仅以用户名.密码为例 <body> <form id="demoForm"> <fieldset> <legend>用户登录</l

  • JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    本文实例讲述了JavaScript语法高亮库highlight.js用法.分享给大家供大家参考,具体如下: highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://hig

  • jQuery.validate.js表单验证插件的使用代码详解

    Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

  • jQuery 图片查看器插件 Viewer.js用法简单示例

    本文实例讲述了jQuery 图片查看器插件 Viewer.js用法.分享给大家供大家参考,具体如下: html: <!-- 引入文件 --> <link rel="stylesheet" href="/css/viewer.min.css" rel="external nofollow" > <script src="/js/viewer.min.js"></script> &l

  • 详解动画插件wow.js的使用方法

    本文介绍了动画插件wow.js的使用方法 ,具体如下,分享给大家 1,下载文件 animate.css 下载地址: http://daneden.github.io/animate.css/ wow.min.js 下载地址:  http://www.downyi.com/downinfo/37040.html#address 2,引入文件 <link rel="stylesheet" href="css/animate.css" rel="exter

随机推荐