1、用途:
用于对数据进行动态变化的展示效果,比如数字统计、倒计时等。
2、下载地址
(1)https://github.com/inorganik/countUp.js
(2)https://gitee.com/mirrors/countup-js
3、参数:
$(function() {
CountUp(参数一target, 参数二startVal, 参数三endVal , 参数四decimals, 参数五duration, 参数六options)
});
参数一(必选): 数字所在容器,目标对象,数字在哪里显示。
参数二(必选): 数字开始的值
参数三(必选): 数字结束的值
参数四(可选): 数字小数点后保留的位数,默认为0
参数五(可选): 整个动画运动的总时间,默认为2s
参数六(可选): 其他配置项,用来修改默认的配置项
注:每多一项数字就要增加一行CountUp();
4、例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字动画插件countUp</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="countUp.js"></script>
<style>
*{margin: 0px;padding:0px;}
#box{margin: 0 auto;margin-top: 150px;text-align: center;font-size: 28px;font-weight: bold;}
#box span{padding:0px 30px;}
</style>
</head>
<body>
<div id="box">
<span id="n1"></span>
<span id="n2"></span>
<span id="n3"></span>
</div>
<script type="text/javascript">
var options = {
useEasing: true, // 是否使用缓动动画,默认为缓动,可以设置为false让其匀速
useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
separator: '', // 分组时使用的分隔符,默认是逗号,不加不显示
decimal: '.', // 小数点符号,默认为 '.'
//easingFn: easeOutExpo, // 缓动动画的函数
//formattingFn: formatNumber, // 格式化数字如12345,格式化为123,45
prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,¥ 等)
suffix: '人民币' // 后缀(数字的后缀 ,根据需要可设为 元,个,美元等)
};
$(function() {
new CountUp("n1", 1000, 2024.36, 0, 5, options).start();
new CountUp("n2", 2024, 2099, 2, 5, options).start();
new CountUp("n3", 1999, 2023.12, 2, 5, options).start();
});
</script>
</body>
</html>
点赞 收藏
DTOP V2.0 © 2003- 2024 粤ICP备05004015号
Powered By [ The Design Team of PowerEasy ]
数字动画的使用
于 2024-05-06 17:03:45 首次发布