CountUp.js 轻量级的数值动画JavaScript插件库
2024-04-13 1293 0
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 秒。
您可能感兴趣：
阿里云 云服务器 99元1年 2核2G 3M固定带宽 续费与新购同价
领取 通义灵码 免费使用资格 兼容 Visual Studio Code、Visual Studio、JetBrains IDEs 等主流编程工具， 为你提供高效、流畅、舒心的智能编码体验！