Jquery使用countTo.js插件实现数字滚动效果

ℳ墨尔本

已于 2025-03-18 13:10:00 修改

阅读量815

点赞数 22

分类专栏：前端文章标签： javascript jquery 前端

于 2025-03-17 17:26:35 首次发布

本文链接：https://blog.youkuaiyun.com/Jnsone/article/details/146318833

版权

前端专栏收录该内容

6 篇文章

订阅专栏

一. 前言

最近在做公司官网项目时，要求要展示一些数据，加上一些炫酷的效果。于是在网上找了一些开源的库，由于项目用的Jquery，所以找了countTo插件。话不多说，先看效果：

数字滚动效果

二. 使用方法

1. 在代码引入count.js插件

由于countTo插件依赖于Jquery，所以在此之前还要引入Jquery，笔者这里以引用cdn的方式，你也可以将js文件下载到你的项目中引入。

<script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/jquery-countto/1.2.0/jquery.countTo.min.js"></script>

2. 使用

这里笔者简单写一个demo，效果是这样：给你要操作的数字加一个id，或者你使用class类名也行。
在这里插入图片描述

<style>
  #person-data{
       display: flex;
       font-size: 26px;
   }
   .item{
       width: 300px;
   }
</style>
</head>
<body>
<div id="person-data">
    <div class="item">
        财富 <i id="count-1">8889</i><sup>+</sup>
    </div>
    <div class="item">
        运气 <i id="count-2">3456</i><sup>+</sup>
    </div>
</div>
</body>
<script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/jquery-countto/1.2.0/jquery.countTo.min.js"></script>
<script>
    $(document).ready(function () {
        //你可以在这里定义你要操作的数字配置，从一个数滚动到另一个数
        let $counters = [
            { id: '#count-1', from: 7777, to: 8889 },
            { id: '#count-2', from: 3000, to: 3456 },
        ];

        $counters.forEach(function(counter) {
            $(counter.id).countTo({
                from: counter.from,
                to: counter.to,
                speed: 1000,    //多长时间内完成
                refreshInterval: 50  //这里的50指的是刷新间隔
            });
        });
    });
</script>

怎样？是不是很简单呢

3. 最佳实践

当然，更通用的做法是将一些变量通过属性嵌入到html中，这对于一些数据从后端生成的页面更为适用，像jsp以及thymeleaf模板引擎这种，这种方法使得数据更加灵活，因为你可以直接在HTML中修改这些值，而无需更改JavaScript代码。例如：

<div id="person-data">
    <div class="item" data-from="7777" data-to="8889">
        财富 <i id="count-1">8889</i><sup>+</sup>
    </div>
    <div class="item" data-from="3000" data-to="3456">
        运气 <i id="count-2">3456</i><sup>+</sup>
    </div>
</div>
<script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/jquery-countto/1.2.0/jquery.countTo.min.js"></script>
<script>
    $(document).ready(function () {
        let $items = $('.item');

        $items.each(function() {
            let $this = $(this);
            let from = $this.data('from');
            let to = $this.data('to');
            let $counter = $this.find('i');

            $counter.countTo({
                from: from,
                to: to,   
                speed: 1000,
                refreshInterval: 50
            });
        });
    });
</script>

4. 可配置项

这里给大家一些插件的配置项，读者在使用时可参考实现。

参数名称	类型	作用描述	示例值
`from`	`number`	指定动画开始的数值。	`50`
`to`	`number`	指定动画结束的数值。	`2500`
`speed`	`number`	指定动画完成所需的总时间（以毫秒为单位）。	`1000`
`refreshInterval`	`number`	指定动画帧之间的刷新间隔（以毫秒为单位），用于创建平滑的动画效果。	`50`
`formatter`	`function`	一个函数，用于格式化每个动画帧的数值。通常用于控制数字的显示精度。	`function (value, options) { return value.toFixed(options.decimals); }`（注意：`options.decimals`需明确指定）
`onUpdate`	`function`	每当数值更新时执行的回调函数，参数`value`为当前数值，`this`可能指向动画元素。	`function (value) { console.log(value); }`
`onComplete`	`function`	当动画完成时执行的回调函数，参数`value`为最终数值，`this`可能指向动画元素。	`function (value) { console.log('Animation complete:', value); }`