您的位置：首页 > Web前端 > JQuery

jquery轻量级数字动画插件countUp.js使用详解

2019-10-18 07:04 2959 查看

CountUp.js是一个无依赖，轻量级的JavaScript“类”，可用于快速创建以更有趣的方式显示数字数据的动画。

展示效果：

详细代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轻量级数字动画插件</title>

<!-- 该特效该引入的js插件 -->
<script type="text/javascript" src="./jQuery数字动画特效_files/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./jQuery数字动画特效_files/countUp.min.js"></script>
</head>
<body>

<h1 id="num1"></h1>
<h1 id="num2"></h1>
<h1 id="num3"></h1>

<script type="text/javascript">
var options = {  
useEasing: true, // 使用缓和
  useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
  separator: ',', // 分隔器(千位分隔符,默认为',')
  decimal: '.', // 十进制(小数点符号,默认为 '.')
  prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
  suffix: '' // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等)
};
$(function() {
// CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参数六)
// 参数一: 数字所在容器
// 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长
// 参数三: 数字增长后的最终值,该值一般通过异步请求获取
// 参数四: 数字小数点后保留的位数
// 参数五: 数字增长特效的时间,此处为3秒
// 参数六: 其他配置项
// 注: 参数六也可不加,其配置项则为默认值

new CountUp("num1", 0, 1380, 0, 3, options).start();
new CountUp("num2", 0, 1380, 2, 3, options).start();
new CountUp("num3", 0, 1380, 4, 3, options).start();
});
</script>

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery countUp.js 数字动画

相关文章推荐

新的分享

章节导航