纯js数字滚动动画插件countUp.js

GIF.gif

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 位网友评论:

欢迎来评论

请填写验证码

为您推荐