插件說(shuō)明
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í)間。它依賴于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í)間扒袖。
