JQuery数字滚动插件jquery.counterup.js

简介

jquery.counterup.js 该插件可以控制动画的延迟时间和动画过渡时间。但它依赖于Waypoints.js插件来监听滚动事件。从而实现页面滚动到数字可视窗口，实现让数字从零到指定数值的滚动。

使用

1.  引入 jQuery.js、jquery.waypoints.js 和 jquery.counterup.js 文件

2.  HTML

<div class="content">
  <span class="counter">20</span>
  <span class="counter">100</span>
  <span class="counter">500</span>
</div>

3. 调用

<script>
  $('.counter').countUp();
</script>

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

<div class="content">
  <span class="counter" data-counter-time="5000" data-counter-delay="50">20</span>
  <span class="counter" data-counter-time="5000" data-counter-delay="60">100</span>
  <span class="counter" data-counter-time="5000" data-counter-delay="10">500</span>
</div>

相关链接

GitHub 地址 ：  https://github.com/ciromattia/jquery.counterup

效果演示 ：  http://ciromattia.github.io/jquery.counterup/demo/index.html