在本教程中,我们将使用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); }, } ); });