CountUp.js 轻量级的数值动画JavaScript插件库
2024-07-23
65
CountUp.js 是一款无依赖、轻量级的JavaScript库,专门用于创建数值动画效果,用于创建更具吸引力的数字数据显示动画。它使数字变化更加生动,并支持多种自定义设置,适用于各种场景。
CountUp.js GitHub地址:https://github.com/inorganik/countUp.js/
react-countup https://www.npmjs.com/package/react-countup
CountUp.js 主要功能
数字动画: CountUp.js 可以将数字从一个值平滑地过渡到另一个值,使数据呈现更加直观、吸引人。
增减计数: 它支持递增和递减两种计数方式,您可以通过 startVal 和 endVal 参数设置起始值和结束值。
高度可定制: 支持自定义动画时长、延迟时间、小数位数、前缀、后缀以及重绘行为等多种属性。
跨浏览器兼容: CountUp.js 兼容主流浏览器,可放心使用。
CountUp.js 使用方法
引入库:
下载库并在 HTML 中引用 JavaScript 文件。
使用 CDN 链接:
<script src="https://unpkg.com/countup/dist/countUp.min.js"></script>
使用 npm 安装:npm install countup.js 并导入:
import CountUp from 'countup.js';
创建 CountUp 实例:
const countUp = new CountUp('targetElementId', endValue, options);
targetElementId: 要显示动画数字的 HTML 元素 ID。
endValue: 动画结束时要达到的最终值。
options (可选): 包含动画自定义选项的对象。
启动动画:
countUp.start();
完整示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CountUp.js 示例</title>
<script src="https://unpkg.com/countup/dist/countUp.min.js"></script>
</head>
<body>
<h1 id="counter">0</h1>
<script>
const countUp = new CountUp('counter', 1000, {
duration: 2.5, // 动画时长(秒)
decimals: 2, // 小数位数
prefix: '$', // 数字前缀
suffix: ' 美元', // 数字后缀
});
countUp.start();
</script>
</body>
</html>
以上代码将显示一个数字,从 0 平滑增加到 $1,000.00 美元,耗时 2.5 秒。
更新于:3个月前赞一波!2
相关文章
- 轻量级 JavaScript 动画库 mo.js使用教程
- 文件上传JavaScript库FilePond使用教程
- Swapy - 开源JavaScript js拖拽插件
- JavaScript 的 sessionStorage 能否加锁?
- 18款Visual Studio实用插件
- 全栈工程师看过来!PHP Javascript语法对照、速查
- Javascript事件与功能说明大全
- Javascript脚本运算符执行顺序对照表
- 如何使用JavaScript从字符串中删除HTML标签?
- 如何在 JavaScript 中使用正则表达式删除 HTML 标签?
- 使用 HTML、CSS 和 JavaScript 的实时计算器
- ohmyz 插件
- VSCode 插件 Remote SSH 连接远程服务器
- VSCode 插件 Dyno File Utils 脱离鼠标管理文件
- VSCode 插件 Project Manager 管理项目
- 使用VSCode开发.NET MVC常用插件
- JS判断是否在微信浏览器打开
- 谷歌浏览器 常用插件推荐
- JavaScript设计模式学习网站Patterns
- 解释 JavaScript 中计时器的工作原理
文章评论
评论问答