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。