jquery-levelup是一款类似电子游戏积分增加减少特效的jQuery数字动画插件。该插件可以制作出+1/-1的数字动画，你可以控制增加或减少的数字，颜色和样式等，制作出炫酷的积分增加减少动画特效。

使用方法

使用该数字动画插件需要在页面中引入jquery和jquery.levelup.js文件。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.levelup.js"></script> 
                

HTML结构

你可以使用一个<span>元素来包裹需要制作数字动画的数字。

<span>counter <span style="font-weight: bold;" id='the_cnt'>0</span></span>
                

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该数字动画插件。

 var $tc = $('#the_cnt');
$tc.levelup({'start' : 0});

$('#incrementBtn').on('click', function(event) {
    $tc.levelup('increment', 1);
    $(this).blur();
});
$('#decrementBtn').on('click', function(event) {
    $tc.levelup('decrement', 1);
    $(this).blur();
});                  
                

配置参数

jquery.levelup.js数字动画插件可用的配置参数有：

方法

jquery-levelup数字动画插件的github地址为：https://github.com/pstrinkle/jquery-levelup。

在线预览    源码下载