CountUp.js數(shù)字滾動(dòng)插件使用方法詳解
更新時(shí)間：2019年10月17日 16:55:49 作者：bocaidada
這篇文章主要為大家詳細(xì)介紹了CountUp.js數(shù)字滾動(dòng)插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
CountUp.js 是一個(gè)輕量級(jí)，無(wú)依賴的JavaScript類，通過(guò)簡(jiǎn)單的設(shè)置就可以達(dá)到數(shù)字滾動(dòng)的效果
演示地址： countUp.js
可配置項(xiàng)：
target = 目標(biāo)元素的 ID；
startVal = 開(kāi)始值；
endVal = 結(jié)束值；
decimals = 小數(shù)位數(shù)，默認(rèn)值是0；
duration = 動(dòng)畫延遲秒數(shù)，默認(rèn)值是2；
//用法：
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
}
var demo = new CountUp(target , startVal, endVal , decimals , duration , options);
demo.start();
相關(guān)代碼實(shí)例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
<script type="text/javascript">
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
};
var demo = new CountUp('box', 0, 4068, 0, 2.5, options);
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ie8 不支持new Date(2012-11-10)問(wèn)題的解決方法
使用JS的時(shí)候也碰到了如下問(wèn)題，后來(lái)經(jīng)過(guò)修改，在IE8環(huán)境里，下面的代碼是可用的，下面與大家分享下ie8 不支持new Date的解決方法，有類似問(wèn)題的朋友可以參考下2013-07-07
收集不同瀏覽器的怪癖，對(duì)于大家以后的開(kāi)發(fā)與兼容性問(wèn)題，有所幫助。2010-07-07
js與css實(shí)現(xiàn)彈出層覆蓋整個(gè)頁(yè)面的方法
這篇文章主要介紹了js與css實(shí)現(xiàn)彈出層覆蓋整個(gè)頁(yè)面的方法,分別以實(shí)例形式展示了彈出層覆蓋整個(gè)頁(yè)面的css樣式與js控制的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
關(guān)于layui toolbar和template的結(jié)合使用方法
今天小編就為大家分享一篇關(guān)于layui toolbar和template的結(jié)合使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
生成map對(duì)象的方法或許會(huì)有很多，在本文將為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過(guò)2014-01-01
JavaScript判斷訪問(wèn)的來(lái)源是手機(jī)還是電腦,用的哪種瀏覽器
這篇文章主要介紹了使用JavaScript判斷訪問(wèn)的來(lái)源是手機(jī)還是電腦,用的哪種瀏覽器。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
bootstrap校驗(yàn)laydate起止日期聯(lián)動(dòng)失效問(wèn)題及解決方法
這篇文章主要介紹了bootstrap校驗(yàn)laydate起止日期聯(lián)動(dòng)失效問(wèn)題,項(xiàng)目中用到bootstrapValidator，以及l(fā)aydate（by:賢心，插件效果美觀），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
js實(shí)現(xiàn)貪吃蛇游戲 canvas繪制地圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲，canvas繪制地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了如何用CocosCreator制作微信小游戲，從下載工具到配置，最后連接微信小游戲預(yù)覽，一步步很詳細(xì)，希望讀者們仔細(xì)看一下2021-04-04
這篇文章主要介紹了小程序紅包雨的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02