插件描述: jquery.countup.js 是一款輕量級jquery數字動畫插件。該數字動畫插件可以在頁面滾動時,將指定的數字從0開始計數增加動畫。
插件說明
jquery.countup.js 是一款輕量級jquery數字動畫插件。該數字動畫插件可以在頁面滾動時,將指定的數字從0開始計數增加動畫。
該數字動畫插件可以控制動畫的延遲時間和動畫過渡時間。它依賴於 Waypoints 插件來監聽滾動事件。
安裝
可以通過npm或bower來安裝 jquery.countup.js插 件。
1 npm install jquery.countup.js 2 bower install jquery.countup.js
使用方法
在頁面引入 jquery,jquery.waypoints.min.js 和 jquery.countup.min.js 文件。
1 <script src="jquery.min.js"></script> 2 <script src="jquery.waypoints.min.js"></script> 3 <script src="jquery.countup.min.js"></script>
HTML結構
使用<span>元素作為數字的容器。
1 <span class="counter">1,498,547.00</span> 2 <span class="counter">7.99</span> 3 <span class="counter">1455455</span>
你也可以使用 data-counter-time 和 data-counter-delay 屬性來設置數字動畫的動畫時間和延遲時間。
1 <span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span> 2 <span class="counter" data-counter-time="100" data-counter-delay="20">9842</span>
初始化插件
在頁面DOM元素加載完畢之后,可以通過countUp()方法來初始化數字動畫。
1 $('.counter').countUp();
也可以在初始化的時候傳入配置參數。
1 $('.counter').countUp({ 2 delay: 10, 3 time: 2000 4 });
-
delay:每個數字動畫的延遲時間,單位毫秒。
-
time:計數動畫總的持續時間。