Jquery (jquery.countup) 动画插件实现数字滚动增加动画

首先html页面中head内引入所需的js文件
jquery.min.js
waypoints.min.js
countup.min.js

3.使用<span>元素作为数字的容器。

1 <span class="counter">1,498,547.00</span>
2 <span class="counter">7.99</span>
3 <span class="counter">1455455</span>
 

4.你也可以使用 data-counter-time 和 data-counter-delay 属性来设置数字动画的动画时间和延迟时间。

1 <span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span>
2 <span class="counter" data-counter-time="100" data-counter-delay="20">9842</span>
 

5.初始化插件

在页面DOM元素加载完毕之后，可以通过countUp()方法来初始化数字动画。

1 $('.counter').countUp();
也可以在初始化的时候传入配置参数。

1 $('.counter').countUp({
2     delay: 10,
3     time: 2000
4 });
delay：每个数字动画的延迟时间，单位毫秒。

time：计数动画总的持续时间。

异步请求获取值，更新数字动画、页面引入异步动画countUp.min.js
参考页面 https://stackoverflow.com/questions/42873711/error-when-using-a-facts-counter-library-countup-js
countUp.min.js

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