JS實現頁面數字跳動-CountUp.js
阿新 • • 發佈:2019-01-02
CountUp.js下載
連結:https://pan.baidu.com/s/1xRfkVelE4jVKShhpZzQYkw
提取碼:boxq
CountUp.js 介紹
CountUp.js 是無依賴的、輕量級的 JavaScript 類,可以用來快速建立以一種更有趣的動畫方式顯示數值資料。
儘管它的名字叫 countUp,但其實可以在兩個方向進行變化,這是根據你傳遞的 startVal 和 endVal 引數判斷的。
var numAnim = new CountUp('target', startVal, endVal, decimals, duration, options);
可配置的引數:
target = 目標元素的 ID;
startVal = 開始值;
endVal = 結束值;
decimals = 小數位數,預設值是0;
duration = 動畫延遲秒數,預設值是2;
var options = { //預設使用緩和,臨近結束緩慢跳動 useEasing: true, //預設使用分組 useGrouping: true, //千位分隔器,可為空 separator: ',', //十進位制,可為空 decimal: '.', //字首 prefix: '¥', //字尾 suffix: '' }; var numAnim = new CountUp('myTargetElement', 0, 4068, 0, 2.5, options); if (!numAnim.error) { numAnim.start(); // numAnim.start(methodToCallOnComplete); //提醒完成 } else { console.error(numAnim.error); }