0712-2888027 189-8648-0214
微信公眾號(hào)

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號(hào)

當(dāng)前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > JQuery CountUp.js讓數(shù)字以非常有趣的動(dòng)畫(huà)方式顯示

JQuery CountUp.js讓數(shù)字以非常有趣的動(dòng)畫(huà)方式顯示

時(shí)間:2018-03-27來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 2488次
CountUp.js 無(wú)依賴(lài)的、輕量級(jí)的 JavaScript 類(lèi),可以用來(lái)快速創(chuàng)建以一種更有趣的動(dòng)畫(huà)方式顯示數(shù)值數(shù)據(jù)。盡管它的名字叫 countUp,但其實(shí)可以在兩個(gè)方向進(jìn)行變化,這是根據(jù)你傳遞的 startVal 和 endVal 參數(shù)判斷的。
JQuery CountUp.js讓數(shù)字以非常有趣的動(dòng)畫(huà)方式顯示

項(xiàng)目地址:http://inorganik.github.io/countUp.js/

jquery.countup.js是一款輕量級(jí)jquery數(shù)字動(dòng)畫(huà)插件。該數(shù)字動(dòng)畫(huà)插件可以在頁(yè)面滾動(dòng)時(shí),將指定的數(shù)字從0開(kāi)始計(jì)數(shù)增加動(dòng)畫(huà)。

該數(shù)字動(dòng)畫(huà)插件可以控制動(dòng)畫(huà)的延遲時(shí)間和動(dòng)畫(huà)過(guò)渡時(shí)間。它依賴(lài)于Waypoints插件來(lái)監(jiān)聽(tīng)滾動(dòng)事件。

安裝

可以通過(guò)npm或bower來(lái)安裝jquery.countup.js插件。

npm install jquery.countup.js
bower install jquery.countup.js

使用方法

在頁(yè)面引入jquery,jquery.waypoints.min.js和jquery.countup.min.js文件。

<script src="jquery.min.js"></script>
<script src="jquery.waypoints.min.js"></script>
<script src="jquery.countup.min.js"></script>

HTML結(jié)構(gòu)

使用<span>元素作為數(shù)字的容器。

<span class="counter">1,498,547.00</span>
<span class="counter">7.99</span>
<span class="counter">1455455</span>

你也可以使用data-counter-time和data-counter-delay屬性來(lái)設(shè)置數(shù)字動(dòng)畫(huà)的動(dòng)畫(huà)時(shí)間和延遲時(shí)間。

<span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span>
<span class="counter" data-counter-time="100" data-counter-delay="20">9842</span>

初始化插件

在頁(yè)面DOM元素加載完畢之后,可以通過(guò)countUp()方法來(lái)初始化數(shù)字動(dòng)畫(huà)。

$('.counter').countUp();

也可以在初始化的時(shí)候傳入配置參數(shù)。

$('.counter').countUp({
delay: 10,
time: 2000
});

delay:每個(gè)數(shù)字動(dòng)畫(huà)的延遲時(shí)間,單位毫秒。

time:計(jì)數(shù)動(dòng)畫(huà)總的持續(xù)時(shí)間。

可配置的參數(shù):

target = 目標(biāo)元素的 ID;
startVal = 開(kāi)始值;
endVal = 結(jié)束值;
decimals = 小數(shù)位數(shù),默認(rèn)值是0;
duration = 動(dòng)畫(huà)延遲秒數(shù),默認(rèn)值是2;

使用示例:

var demo = new countUp("myTargetElement", 24.02, 94.62, 2, 2.5);
demo.start();
熱門(mén)關(guān)鍵詞: JQuery CountUp.js 數(shù)字 動(dòng)畫(huà)方式

您可能感興趣的相關(guān)文章:

欄目列表
推薦內(nèi)容
熱點(diǎn)內(nèi)容
展開(kāi)