本文目录一览：
CountUp.js数字滚动插件
创建 new CountUp(“ID选择器”, 开始值, 结束值, 小数位数, 只需时间, options对象)
options对象:{
useEasing: true, —–使用缓和
useGrouping: true, —–使用分组(是否显示千位分隔符,一般为 true)
separator: ‘,’, —–分隔器(千位分隔符,默认为’,’)
decimal: ‘.’, —– 十进制(小数点符号,默认为 ‘.’)
prefix: ”, —–字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
suffix: ” —–后缀(数字的后缀 ,根据需要可设为 元,个,美元 等
}
val.start()
三部分
设置options对象 创建CountUp 执行.start()
css可以实现countup.js么
CSS可以实现CountUp.js
无依赖的、轻量级的 JavaScript 类，可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp，但其实可以在两个方向进行变化，这是根据你传递的 startVal 和 endVal 参数判断的。
countUp.js是一个轻量经的JavaScript类，没有任何第三方库。可用于以一种有趣的动画展示数字变化。
html 数字实现滚动的效果 到指定的数（使用countup.js插件）
数字实现滚动的效果
span id=”num1″1000/span
script src=””/script
script type=”text/javascript”
var options = {
useEasing: true,
useGrouping: true,
separator: ‘,’,
decimal: ‘.’,
};
var num1 = new CountUp(‘num1’, 0, 1000, 0, 2.5, options);
if (!num1.error) {
num1.start();
} else {
console.error(num1.error);
}
/script
//num1:目标元素的ID
//0：滚动开始的数字
//100：滚动结束的数字
//2.5 :完成整个效果的时间
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/150546.html
微信扫一扫 
支付宝扫一扫 