Simple +1/-1 Animation similar to point accumulation in a video game

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

JavaScript 动画效果

访问GitHub主页

共9Star

详细介绍

jquery-levelup

Simple +1/-1 Animation similar to point accumulation in a video game.

on npm

Latest release npm

Plans

See issues.

Usage

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/libs/jquery-levelup/jquery.levelup.min.js"></script>

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

<script>
    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();
    });
</script>

Options

You should specify options like in usage example above.

Name Type Default Description
start integer 0 Start value for span.
incrementer/decrementer.bold boolean true Whether the incrementer
incrementer/decrementer.color CSS color string null Change the incrementer
incrementer/decrementer.class string null Add a class to the incrementer
showThousands boolean false Whether to use a thousands separate everywhere
thousandSep string "," The thousand separator to use
Methods Params
increment integer by which to increment
decrement absolute value of integer by which to decrement (always positive)
reset
get

License

Apache License 2.0

推荐源码