jQuery CounterUp是一款實(shí)現(xiàn)數(shù)字自動(dòng)增加效果的jQuery插件,它可以用于展示數(shù)字、數(shù)量、時(shí)間等統(tǒng)計(jì)數(shù)據(jù),同時(shí)也支持自定義樣式和動(dòng)畫效果。
// HTML <span class="counter" data-count="1000">0</span> // JS $('.counter').counterUp({ delay: 10, time: 1000 });
以上代碼展示了如何在一個(gè)span標(biāo)簽中使用jQuery CounterUp插件,指定了初始數(shù)字為0,最終數(shù)字為1000,動(dòng)畫延遲10毫秒,動(dòng)畫時(shí)間為1000毫秒。插件會(huì)自動(dòng)計(jì)算數(shù)字增加的速度,產(chǎn)生數(shù)字自動(dòng)增加的動(dòng)畫效果。
除了基本的設(shè)置之外,jQuery CounterUp還支持自定義事件回調(diào)函數(shù),可以在數(shù)字增加/完成/重置等事件發(fā)生時(shí)執(zhí)行自己編寫的代碼。
$('.counter').counterUp({ delay: 10, time: 1000, complete: function(elem) { console.log(elem); } });
以上代碼展示了如何定義一個(gè)complete回調(diào)函數(shù),當(dāng)數(shù)字增加完成時(shí)會(huì)輸出elem對(duì)象到控制臺(tái)。
總的來說,jQuery CounterUp是一款簡單易用、功能強(qiáng)大的數(shù)字自動(dòng)增加插件,可以幫助網(wǎng)站開發(fā)者在展示統(tǒng)計(jì)數(shù)據(jù)時(shí)增加一些動(dòng)態(tài)效果,提高用戶體驗(yàn)。