countUp.js 是一款非常流行的 jQuery 数字动画插件,可以方便地实现数字的动态变化效果,可以用于展示数字统计、倒计时等场景。
如果要实现复杂的动画效果,需要自定义插件源码,比较麻烦。
在 HTML 中引入 jQuery 和 countUp.js 插件:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/countUp.js"></script>
如果你的项目中已经引入了 jQuery,则不需要再次引入。
在需要添加数字动画的页面中,添加一个元素:
<span id="countUp"></span>
在 JavaScript 文件中编写以下代码:
$(document).ready(function(){
var options = {
useEasing : true, // 是否启用缓动效果
useGrouping : true, // 是否启用千分位分组
separator : ',', // 千位分隔符
decimal : '.', // 小数点
prefix : '', // 前缀
suffix : '' // 后缀
};
var countUp = new CountUp('countUp', 0, 1000, 0, 2.5, options); // countUp 参数解释
countUp.start(); // 开始数字动画
});
'countUp'
:需要添加数字动画的元素 ID。0
:起始数字。1000
:结束数字。0
:小数位数。2.5
:动画持续时间(秒)。options
:传递 CountUp.js 配置,例如:是否启用缓动效果、是否启用千分位分组等。如果你想让数字动画的过程更加缓慢,可以在选项中设置缓动效果,例如:
var options = {
useEasing : true, // 是否启用缓动效果
easingFn: easeOutExpo // 缓动函数
};
还可以自定义缓动函数:
function customEasingFn(t, b, c, d) {
return c * (t /= d) * t + b;
}
如果你想自定义数值的变化格式,例如添加前缀、后缀、指定小数位数等等,可以在选项中设置:
var options = {
useEasing : true, // 是否启用缓动效果
useGrouping : true, // 是否启用千分位分组
separator : ',', // 千位分隔符
decimal : '.', // 小数点
prefix : '¥', // 前缀
suffix : '元' // 后缀
};
如果你想在数字动画过程中添加回调函数,例如动画结束后执行某个操作:
var countUp = new CountUp('countUp', 0, 1000, 0, 2.5, options, function() {
console.log('数字动画结束!');
});
HTML 结构:
<h1 id="count1">0</h1>
<button id="start1">开始数字动画</button>
JavaScript 代码:
$(document).ready(function(){
var countUpOptions = {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.',
prefix : '',
suffix : ''
};
var countUp = new CountUp('count1', 0, 1000, 0, 2.5, countUpOptions);
$('#start1').click(function(){
countUp.reset();
countUp.start();
});
});
效果展示:点击查看
HTML 结构:
<h2>距离离小年还有<span id="count2"></span>秒</h2>
JavaScript 代码:
$(document).ready(function(){
var countUpOptions = {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.',
prefix : '',
suffix : ''
};
var countUp = new CountUp('count2', 0, 60, 0, 30, countUpOptions);
countUp.start();
setInterval(function(){
countUp.reset();
countUp.start();
}, 30000);
});
效果展示:点击查看。