zoukankan      html  css  js  c++  java
  • jquery轻量级数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画。

    插件说明

     jquery.countup.js 是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画。

    该数字动画插件可以控制动画的延迟时间和动画过渡时间。它依赖于 Waypoints 插件来监听滚动事件。

    安装

    可以通过npm或bower来安装 jquery.countup.js插 件。

    1 npm install jquery.countup.js
    2 bower install jquery.countup.js

    使用方法

    在页面引入 jquery,jquery.waypoints.min.js 和 jquery.countup.min.js 文件。

    1 <script src="jquery.min.js"></script>
    2 <script src="jquery.waypoints.min.js"></script>
    3 <script src="jquery.countup.min.js"></script>

    HTML结构

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

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

    你也可以使用 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>

    初始化插件

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

    1 $('.counter').countUp();

    也可以在初始化的时候传入配置参数。

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

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

  • 相关阅读:
    windows环境下面批量修改文件夹名称
    项目中的坑(二)
    微信公众号支付之退款
    微信公众号支付之付款
    excel两张表数据匹配数据(VLOOKUP)
    windows环境下面批量移动文件到指定文件夹里面
    windows环境下面批量新建文件夹
    linux 完全卸载软件方法
    如何获取应用宝APP ID
    mysql 时间函数转换
  • 原文地址:https://www.cnblogs.com/joyco773/p/9125207.html
Copyright © 2011-2022 走看看