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:计数动画总的持续时间。

  • 相关阅读:
    [NOI Online #3 提高组]
    Luogu P3491 [POI2009]SLW-Words
    AtCoder Grand Contest 043
    Luogu P5607 [Ynoi2013]无力回天NOI2017
    AtCoder Grand Contest 041
    Luogu P5070 [Ynoi2015]即便看不到未来
    BZOJ 4367: [IOI2014]holiday假期
    BZOJ 3571: [Hnoi2014]画框
    BZOJ 4456: [Zjoi2016]旅行者
    BZOJ 1111: [POI2007]四进制的天平Wag
  • 原文地址:https://www.cnblogs.com/joyco773/p/9125207.html
Copyright © 2011-2022 走看看