纯js数字滚动动画插件countUp.js
CountUp.js是一款纯JS的数字动画插件,兼容HTML5的requestAnimationFrame。
使用也简单,Demo:
<span id="number"></span> <script src="./countUp.js"></script> <script> var options={ useEasing: true, useGrouping: true, separator: ',', decimal: '.', } var number = new CountUp('number', 0, 100, 0, 2,options); number.start(); </script>
参数文档:
new CountUp有五个参数:target, startVal, endVal, decimals, duration, options
target:节点,ID名称
startVal:初始值
endVal:结束值
decimals:小数位数
duration:过渡时间,单位:秒
options:初始参数
options参数文档:
useEasing: 过渡动画效果,默认ture
useGrouping:千分位效果,例:1000->1,000。默认true
separator:使用千分位时分割符号
decimal:小数位分割符号
prefix:前置符号
suffix:后置符号,支持汉字
函数说明:
start(回调函数):开始动画,支持回调
pauseResume():暂停或继续
reset():重置动画
update(数字):修改结束值
有 0 位网友评论: