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 代码