您的位置： 首页 >日志>前端技术>详细内容

前端技术

数字动画插件countUp.js介绍

来源：本站原创 发布时间：2024-01-02 16:44:58 浏览次数： 次 【字体：小 大】

1、用途：

用于对数据进行动态变化的展示效果，比如数字统计、倒计时等。

2、下载地址

（1）https://github.com/inorganik/countUp.js

（2）https://gitee.com/mirrors/countup-js

3、参数：

$(function() {

 CountUp(参数一target, 参数二startVal, 参数三endVal , 参数四decimals, 参数五duration, 参数六options)
  });
参数一（必选）: 数字所在容器，目标对象，数字在哪里显示。
参数二（必选）: 数字开始的值
参数三（必选）: 数字结束的值
参数四（可选）: 数字小数点后保留的位数，默认为0
参数五（可选）: 整个动画运动的总时间，默认为2s
参数六（可选）: 其他配置项，用来修改默认的配置项
注：每多一项数字就要增加一行CountUp();


4、例子：


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>数字动画插件countUp</title>
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="countUp.js"></script>
 <style>
     *{margin: 0px;padding:0px;}
     #box{margin: 0 auto;margin-top: 150px;text-align: center;font-size: 28px;font-weight: bold;}
     #box span{padding:0px 30px;}
 </style>
 </head>
 <body>
 <div id="box">
     <span id="n1"></span>
     <span id="n2"></span>
     <span id="n3"></span>
 </div>
 <script type="text/javascript">
 var options = {
    useEasing: true, // 是否使用缓动动画，默认为缓动，可以设置为false让其匀速
    useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
    separator: '', // 分组时使用的分隔符，默认是逗号，不加不显示
    decimal: '.', // 小数点符号,默认为 '.'
    //easingFn: easeOutExpo, // 缓动动画的函数
    //formattingFn: formatNumber, // 格式化数字如12345，格式化为123，45
    prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
    suffix: '人民币' // 后缀(数字的后缀 ,根据需要可设为 元,个,美元等) 
 };
 $(function() {
    new CountUp("n1", 1000, 2024.36, 0, 5, options).start();
    new CountUp("n2", 2024, 2099, 2, 5, options).start();
    new CountUp("n3", 1999, 2023.12, 2, 5, options).start();
 });
 </script>
 </body>
</html>