[JavaScript知识库]数字滚动插件 jQuery.countto 中文 API 文档和使用方法介绍

全新逐浪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 下面是可以传递给方法的选项的完整列表。

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