html数字变换插件,轻量级jquery数字动画插件
生活随笔
收集整理的這篇文章主要介紹了
html数字变换插件,轻量级jquery数字动画插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jquery.countup.js是一款輕量級jquery數字動畫插件。該數字動畫插件可以在頁面滾動時,將指定的數字從0開始計數增加動畫。
該數字動畫插件可以控制動畫的延遲時間和動畫過渡時間。它依賴于Waypoints插件來監聽滾動事件。
安裝
可以通過npm或bower來安裝jquery.countup.js插件。
npm install jquery.countup.js
bower install jquery.countup.js
使用方法
在頁面引入jquery,jquery.waypoints.min.js和jquery.countup.min.js文件。
HTML結構
使用元素作為數字的容器。
1,498,547.00
7.99
1455455
你也可以使用data-counter-time和data-counter-delay屬性來設置數字動畫的動畫時間和延遲時間。
1981
9842
初始化插件
在頁面DOM元素加載完畢之后,可以通過countUp()方法來初始化數字動畫。
$('.counter').countUp();
也可以在初始化的時候傳入配置參數。
$('.counter').countUp({
delay: 10,
time: 2000
});
delay:每個數字動畫的延遲時間,單位毫秒。
time:計數動畫總的持續時間。
總結
以上是生活随笔為你收集整理的html数字变换插件,轻量级jquery数字动画插件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 多用户使用一台计算机可设置,2012年职
- 下一篇: 计算机基础18春在线作业1,东师-计算机