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

插件说明

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

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

安装

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

 npm install jquery.countup.js
bower install jquery.countup.js

使用方法

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

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

HTML结构

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

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

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

 <span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span>
<span class="counter" data-counter-time="100" data-counter-delay="20">9842</span>

初始化插件

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

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

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

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

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

最新文章

  1. Codeforces Round #342 (Div. 2)-B. War of the Corporations
  2. RecyclerView的基本使用
  3. Storm分布式实时流计算框架相关技术总结
  4. LightOJ1191 Bar Codes(DP)
  5. 如何处理PHP和MYSQL的并发以及优化
  6. PL/SQL中查询某的时间段内所有执行的sql
  7. JavaScript之数据类型讲解
  8. 去掉java反编译(JD-GUI)生成的源文件中注释
  9. 201521123006 《Java程序设计》 第2周学习总结
  10. 关于 python中的 TKinterlistbox 控件加横竖滚动条
  11. BZOJ #3625 CF #438E 小朋友和二叉树
  12. Java的反射机制的详细应用
  13. PAT甲题题解-1023. Have Fun with Numbers (20)-大数加法
  14. 【转载】可被路由的协议 &amp; 路由协议 &amp; 不可被路由的协议 的区别
  15. C学习笔记(1)-结构体、预处理与多文件结构程序设计
  16. CSS之换行
  17. statistics_level 参数的应用
  18. 男女通用的减肥计划 10分钟家庭hiit训练
  19. PHP5.4新特性
  20. EF4.4增删改查实例

热门文章

  1. Internet Download Manager 6.27.1 中文特别版(IDM)
  2. wf(五)
  3. golang exec Command
  4. oracle课堂笔记
  5. ecshop增加新字段及相应编辑器
  6. Collection、Iterator、Set、HashSet
  7. cvc-elt.1: Cannot find the declaration of element &#39;beans&#39;
  8. html-----013----实体字符/HTML URL 编码
  9. java新手笔记3 运算符&amp;循环
  10. 简易的RestClient代码
  11. 【前端JS】input textarea 默认文字,点击消失
  12. awk命令简单学习
  13. Linux上ld和ld.so命令的区别
  14. BZOJ 4321: queue2( dp )
  15. IOS系统对fixed定位支持不好的解决方法
  16. Android:dialog去除边框的实现(自带Style的padding)
  17. 把aspx页面输出成xml的方法注意事项
  18. PHP方法实现1-9数列中添加‘+’,‘-’或&#39;&#39;,使和为100,并输出数列
  19. ORA-04091错误原因与解决方法
  20. JAVA之旅(四)——面向对象思想,成员/局部变量,匿名对象,封装 , private,构造方法,构造代码块