jQuery中 动画数字计数

  • 源码大小:16.99KB
  • 所需积分:1积分
  • 源码编号:19JP-3728
  • 浏览次数:516次
  • 最后更新:2023年07月16日
  • 所属栏目:动画
本站默认解压密码:19jp.com 或 19jp_com

简介

在本教程中,我们将使用jQuery的动画()方法在页面上创建一个动画数字向上计数的效果。

这个jQuery脚本将帮助您为您的网站创建一个外观优雅的计数器。它不仅看起来不错,而且非常简单易用,这意味着你不需要任何编码技能

如何使用它:

1.将要计数到1的数字放在一个内联元素中。

<span class="count">
  1024
</span>

<span class="count">
  2048
</span>

<span class="count">
  4096
</span>

2.在文档末尾加载必要的jQuery库。

<script src="/path/to/cdn/jquery.min.js"></script>

3.核心JavaScript(jQuery脚本),用于在页面加载时启用计数效果。

$(".count").each(function () {
  $(this)
    .prop("Counter", 0)
    .animate(
      {
        Counter: $(this).text(),
      },
      {
        duration: 4000,
        easing: "swing",
        step: function (now) {
          now = Number(Math.ceil(now)).toLocaleString('en');
                                $(this).text(now);
        },
      }
    );
});

预览截图