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数字动画插件可用的配置参数有：

参数 类型 默认值 描述
start integer 0 设置数字的初始值。
incrementer/decrementer.bold boolean true 是否使用黑体字体
incrementer/decrementer.color CSS <color>数据类型 null 修改字体颜色
incrementer/decrementer.class string null 自定义class类
showThousands boolean false 是否显示千分位分隔符
thousandSep string "," 使用的千分位分隔符

方法

方法 参数 描述
increment 正整数 增加数值
decrement 负整数 减少数值
reset 无 重置
get 无 获取当前的数值

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