js数字递增特效countUp.js使用
引用案例
<p id="num">3000</p>
<script type="text/javascript" src="countUp.min.js"></script>
<script type="text/javascript">
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.'
};
var num = new CountUp('num', 0, 7210, 0, 2, options);
num.start();
</script>
参数:
target : 目标元素的id
startVal : 你想要开始的值
endVal : 你想要到达的值
decimals : 小数位数,默认值为0
duration : 动画持续时间为秒,默认值为2
options :选项的可选对象
//options对象参数
options = {
useEasing: true, // toggle easing
useGrouping: true, // 1,000,000 vs 1000000
separator: ',', // character to use as a separator
decimal: '.', // character to use as a decimal
easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
prefix: '', // optional text before the result
suffix: '', // optional text after the result
numerals: [] // optionally pass an array of custom numerals for 0-9
};
还有几个方法:
//暂停/恢复
money1.pauseResume();
//重置动画
money1.reset();
//更新值
var someValue = 6666;
money1.update(someValue);countUp.js 代码