jquery輕量級數(shù)字動畫插件countUp.js使用詳解
更新時間：2019年10月17日 17:19:29 作者：GRAY_KEY
這篇文章主要為大家詳細(xì)介紹了jquery鼠標(biāo)滾動數(shù)字增加插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
CountUp.js是一個無依賴，輕量級的JavaScript“類”，可用于快速創(chuàng)建以更有趣的方式顯示數(shù)字?jǐn)?shù)據(jù)的動畫。
該JS插件下載地址
展示效果：
詳細(xì)代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery輕量級數(shù)字動畫插件</title>
<!-- 該特效該引入的js插件 -->
<script type="text/javascript" src="./jQuery數(shù)字動畫特效_files/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./jQuery數(shù)字動畫特效_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: ',', // 分隔器(千位分隔符,默認(rèn)為',')
decimal: '.', // 十進(jìn)制(小數(shù)點符號,默認(rèn)為 '.')
prefix: '', // 字首(數(shù)字的前綴,根據(jù)需要可設(shè)為 $,¥,￥ 等)
suffix: '' // 后綴(數(shù)字的后綴 ,根據(jù)需要可設(shè)為 元,個,美元 等)
};
$(function() {
// CountUp(參數(shù)一, 參數(shù)二, 參數(shù)三, 參數(shù)四, 參數(shù)五, 參數(shù)六)
// 參數(shù)一: 數(shù)字所在容器
// 參數(shù)二: 數(shù)字開始增長前的默認(rèn)值(起始值),一般從 0 開始增長
// 參數(shù)三: 數(shù)字增長后的最終值,該值一般通過異步請求獲取
// 參數(shù)四: 數(shù)字小數(shù)點后保留的位數(shù)
// 參數(shù)五: 數(shù)字增長特效的時間,此處為3秒
// 參數(shù)六: 其他配置項
// 注: 參數(shù)六也可不加,其配置項則為默認(rèn)值
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JQuery中dataGrid設(shè)置行的高度示例代碼
dataGrid 設(shè)置行的高度在jquery中如何做到，下面有個不錯的教程，感興趣的朋友可以參考下2014-01-01
如何從jQuery的ajax請求中刪除X-Requested-With
X-Requested-With常用于判斷是不是ajax請求，ajax請求中刪除X-Requested-With的方法如下，感興趣的朋友可以參考下2013-12-12
jQuery實現(xiàn)自動輸入email、時間和域名的方法
這篇文章主要介紹了jQuery實現(xiàn)自動輸入email、時間和域名的方法,涉及jQuery表單操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08
為什么會出現(xiàn)在IE無效化呢，從上面的解決方案可以知道是XML文件的編碼問題，在轉(zhuǎn)化會前臺可讀時并未符合IE的XML 對象，故需要翻譯成IE兼容的對象。2009-10-10
這篇文章主要介紹了開發(fā)中可能會用到的幾個jQuery小提示和技巧,需要的朋友可以參考下2014-03-03
因公司需要做一個仿百度搜索框,并且?guī)alue值的, 網(wǎng)上找了下只有Text, 都沒帶Value的 所以做了個,代碼給予簡單的注釋，結(jié)構(gòu)很清晰，很容易看懂，感興趣的朋友可以了解下2013-01-01
基于jQuery使用Ajax動態(tài)執(zhí)行模糊查詢功能
這篇文章主要介紹了基于jQuery使用Ajax動態(tài)執(zhí)行模糊查詢功能,通過實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了jQuery表單元素過濾選擇器用法,結(jié)合實例形式分析了jQuery表單元素過濾選擇器針對表單元素匹配相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了Jquery焦點圖實例代碼,詳細(xì)講述了使用jQuery實現(xiàn)焦點圖的詳細(xì)步驟,代碼中備有較為詳盡的注釋說明,便于大家理解,需要的朋友可以參考下2014-11-11
因為工作的原因，從上周開始接觸了jquery，以前我是自己寫js的函數(shù)庫，把一些常用的的方法寫成函數(shù)，現(xiàn)在學(xué)習(xí)了jquery，發(fā)現(xiàn)還真是方便。不盡簡潔了很多。用Ajax很方便，而且還可以很方便創(chuàng)造一些特效。2009-08-08