jQuery CountUp是一種常用的jQuery插件,它可以快速實現數字計數器的效果。
這個插件適用于任何需要數字遞增的場景,比如網站的訪問量、銷售額、倒計時等等。
使用這個插件非常簡單,只需引入jQuery庫和CountUp插件,然后在HTML中添加一個0標簽,即可實現數字計數器的效果。
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jquery.countup.js"></script> <span id="count">0</span> <script> $(document).ready(function(){ var options = { useEasing: true, useGrouping: true, separator: ',', decimal: '.', prefix: '', suffix: '' }; var numAnim = new CountUp("count", 0, 10000, 0, 2.5, options); numAnim.start(); }); </script>
上述代碼中,var options是可選的配置項,可以自定義計數器的分隔符、小數點、前綴、后綴等等。
var numAnim = new CountUp("count", 0, 10000, 0, 2.5, options);是CountUp的核心代碼,它指定了計數器的起始值、終止值以及動畫執行的時間。
最后,調用numAnim.start();方法開始執行計數器動畫。
總之,使用jQuery CountUp插件可以輕松實現數字計數器的效果,為網站增加一份動態的魅力。