温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-08-21 12:28:18 来源:脚本之家 阅读:457 作者:GRAY_KEY 栏目:web开发

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>
 
 <h2 id="num1"></h2>
 <h2 id="num2"></h2>
 <h2 id="num3"></h2>
 
 <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI