数字滚动插件——CountUp.js

最新推荐文章于 2024-04-22 15:24:17 发布

bocaidada

最新推荐文章于 2024-04-22 15:24:17 发布

阅读量4.3k

点赞数

分类专栏：前端知识积累文章标签：前端数字滚动

本文链接：https://blog.csdn.net/bocaidada/article/details/82783878

版权

前端知识积累专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CountUp.js 是一个轻量级，无依赖的JavaScript类，通过简单的设置就可以达到数字滚动的效果

演示地址： http://inorganik.github.io/countUp.js/

可配置项：

target = 目标元素的 ID；
startVal = 开始值；
endVal = 结束值；
decimals = 小数位数，默认值是0；
duration = 动画延迟秒数，默认值是2；

//用法：
 var options = {
            useEasing: true, 
            useGrouping: true, 
            separator: ',', 
            decimal: '.', 
 }
var demo = new CountUp(target , startVal, endVal , decimals , duration , options);
demo.start();

相关代码实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
    <script type="text/javascript">
        var options = {
            useEasing: true, 
            useGrouping: true, 
            separator: ',', 
            decimal: '.', 
        };
        var demo = new CountUp('box', 0, 4068, 0, 2.5, options);
        if (!demo.error) {
            demo.start();
        } else {
            console.error(demo.error);
        }
    </script>
</body>
</html>

在这里插入图片描述

bocaidada

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
数字滚动插件——CountUp.js

CountUp.js 是一个轻量级，无依赖的JavaScript类，通过简单的设置就可以达到数字滚动的效果演示地址： http://inorganik.github.io/countUp.js/可配置项：target = 目标元素的 ID；startVal = 开始值；endVal = 结束值；decimals = 小数位数，默认值是0；duration = 动画延迟秒数，默认值是2...
复制链接

扫一扫