数字滚动插件 jQuery.countto 中文 API 文档和使用方法介绍

作者：发布时间：2021-11-11 来源:本站原创点击数：

全新逐浪CMS解决方案频道上线，最爱逐浪那抹韵动动蓝-全新解决方案频道上线 www.z01.com/Project
有朋友问，首屏的滚动非常好玩，其中文字跳动更是非常有特色，是怎么做的？
在这里插入图片描述
这里分享一个名为jQuery.countto的插件

插件 jQuery.countto 中文 API 文档

Github 地址：https://github.com/mhuggins/jquery-countTo
源码下载： -
效果演示： -
作用：一个 jQuery 插件，它将以指定的速度向上计数（或向下）到目标数（也就是意味着你要调用它的js得放在它的插件后面）。

jQuery countTo 插件

jQuery countTo 是一个 jQuery 插件，它将以指定的速度向上计数（或向下）到目标数字，在 HTML DOM 元素中呈现。

要求：

jQuery countTo 需要最新版本的 jQuery。

用法：

使用此插件有两种主要方法：通过 DOM 节点上的数据属性，以及通过显式传递给 countTo 函数的 JS 选项。

这两种方法也可以混合和匹配。数据属性优先于 JS 选项。

数据属性
这种方法允许您定义 data-*任何 DOM 元素将作为计数器容器的属性。当您在构建 DOM 时已经知道值时，这非常有用。

<span class="timer" data-from="25" data-to="75"></span>
<script type="text/javascript">
  $('.timer').countTo();
</script>

演示所有可能使用的选项的更详细示例如下。

<span class="timer" data-from="0" data-to="100"
      data-speed="5000" data-refresh-interval="50"></span>
<script type="text/javascript">
  $('.timer').countTo();
</script>

有关各种可用选项的详细信息，请参阅下面的“ 选项”部分。

JavaScript 选项

此方法允许您将值传递给 countTo 函数。当您在呈现 DOM 时不知道值时，这非常有用。

<span class="timer"></span>
<script type="text/javascript">
  $('.timer').countTo({from: 0, to: 500});
</script>

演示所有可能使用的选项的更详细示例如下。


<span class="timer"></span>
<script type="text/javascript">
  $('.timer').countTo({
    from: 50,
    to: 2500,
    speed: 1000,
    refreshInterval: 50,
    formatter: function (value, options) {
      return value.toFixed(options.decimals);
    },
    onUpdate: function (value) {
      console.debug(this);
    },
    onComplete: function (value) {
      console.debug(this);
    }
  });
</script>

有关各种可用选项的详细信息，请参阅下面的“ 选项”部分。

选项：

countTo 下面是可以传递给方法的选项的完整列表。

选项	数据属性	描述
从	数据从	从中开始计数的数字。（默认值：0）
至	数据到	要停止计数的数字。（默认值：100）
速度	数据速度	完成计数所需的毫秒数。（默认值：1000）
刷新间隔	数据刷新间隔	刷新计数器之间等待的毫秒数。（默认值：100）
小数点	数据小数	使用默认格式化程序时显示的小数位数。（默认值：0）
formatter（值，选项）	一种处理程序，用于在呈现给 DOM 之前格式化当前值。真实的当前值和选项集将传递给函数，并在 DOM 元素的上下文中运行。它必须返回格式化的值。（默认值： value.toFixed(options.decimals)）
onUpdate（值）	为计数器更新的每次迭代触发的回调函数。当前呈现的值将传递给函数，并在 DOM 元素的上下文中调用。（默认值：null）
onComplete（值）	计数完成时触发的回调函数。最终渲染的值传递给函数，并在 DOM 元素的上下文中调用。	（默认值：null）

功能：

此插件还支持功能，主要用于更改状态。通过将名称作为字符串传递给 countTojQuery 函数来调用函数，例如： $('#timer').countTo(‘stop’)。

开始	如果计时器停止，则恢复计时器。
停	如果计时器正在运行，则停止（暂停）计时器。
切换	根据当前状态启动或停止计时器。
重新开始	将计时器重新设置为其初始“从”值。