CountUp.js是一個無依賴，輕量級的JavaScript“類”，可用于快速創建以更有趣的方式顯示數字數據的動畫。
該JS插件下載地址
展示效果：
詳細代碼示例：
<!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>
<h2 id="num1"></h2>
<h2 id="num2"></h2>
<h2 id="num3"></h2>
<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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
