博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html数字变换插件,轻量级jquery数字动画插件
阅读量:5149 次
发布时间:2019-06-13

本文共 586 字,大约阅读时间需要 1 分钟。

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文件。

HTML结构

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

1,498,547.00

7.99

1455455

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

1981

9842

初始化插件

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

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

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

$('.counter').countUp({

delay: 10,

time: 2000

});

delay:每个数字动画的延迟时间,单位毫秒。

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

转载地址:http://dxdnv.baihongyu.com/

你可能感兴趣的文章
splay学习报告
查看>>
浮点数(double)的优势
查看>>
PAT 1011. A+B和C
查看>>
拜耳药厂的止痛药
查看>>
工人师傅们效率真高
查看>>
SU suchart命令学习
查看>>
【先定一个小目标】Windows下安装MongoDB 3.2
查看>>
[LeetCode] 560. Subarray Sum Equals K 子数组和为K
查看>>
[LeetCode] 211. Add and Search Word - Data structure design 添加和查找单词-数据结构设计
查看>>
50队列:报数
查看>>
form表单用ge方式提交时ie显示中文参数乱码
查看>>
Java 8 – Convert List to Map
查看>>
并查集的删除操作
查看>>
Part3_lesson4---协处理器访问指令
查看>>
Asp.Net url参数加密存在特殊符号处理方法
查看>>
css3
查看>>
强化学习(五)用时序差分法(TD)求解
查看>>
Python打卡第三周
查看>>
oracle按照in的顺序进行排序
查看>>
Inferred type 'S' for type parameter 'S' is not within its bound;
查看>>