jQuery数字动画效果countup.js
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍使用jquery.countup.js制作数字动画效果

jquery.countup.js是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时，将指定的数字从0开始计数增加动画。 该数字动画插件可以控制动画的延迟时间和动画过渡时间。它依赖于Waypoints插件来监听滚动事件。

主要js与解析

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/jquery.countup.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //在页面DOM元素加载完毕之后，可以通过countUp()方法来初始化数字动画。
    $('.counter').countUp();

    //也可以在初始化的时候传入配置参数。
    $('.counter').countUp({
        delay: 10,
        time: 2000
    });
</script>

参数说明

  • delay：每个数字动画的延迟时间，单位毫秒。

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