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

  • 相关阅读:
    常见前端面试题CSS部分
    window.location
    实时时间设置
    常用兼容处理
    背景淡入淡出切换
    常用插件
    PHP文件处理函数
    PHP的数据处理函数二(数组)
    php的数据处理函数一(字符串)
    PHP环境搭建(phpstudy)
  • 原文地址:https://www.cnblogs.com/joyco773/p/9125207.html
Copyright © 2011-2022 走看看