Demos
基本示例
基本的+1 / -1动画效果
- -
$('#basic_1').levelup('increment', 1);
增加/减少较大的数值
The increment and decrement methods allow for other values.
- -
$('#basic_2').levelup('increment', 10);
$('#basic_2').levelup('decrement', 7);
Non-bold option
The incrementer and decrementer are bold by default, but you can turn that off
- -
$('#basic_3').levelup({'start' : 0, 'incrementer' : {'bold' : false}});
$('#basic_3').levelup('increment', 10);
$('#basic_3').levelup('decrement', 7);
控制字体颜色
You can specify the text color. This can be done via a class as well, but this is for those who simply wish to control one aspect of it.
-
$('#basic_4').levelup({'start' : 0, 'incrementer' : {'color' : 'red'}});
$('#basic_4').levelup('increment', 10);
控制class样式
You can style the incrementer/decrementer however you like via a class.
-
<style>
.fun_times {
background-color: lightblue;
color: #FFA500;
box-shadow: 0 0 10px 10px #fff;
}
</style>
$('#basic_5').levelup({'start' : 0, 'incrementer' : {'class' : 'fun_times'}});
$('#basic_5').levelup('increment', 10);
控制千分位逗号分隔
You can set the thousands separator as anything you want. It is off by default.
-
$('#basic_6').levelup({'start' : 1111, 'showThousands' : true});
$('#basic_6').levelup('increment', 5555);
Accumulator is not span - still must be inline display type
If you don't use a span, which is inlined, you'll need to manually inline the type. This is a temporary fix that relates to where it lines up the animation.
$('#basic_7').levelup({'start' : 1111, 'showThousands' : true});
$('#basic_7').levelup('increment', 5555);
Value Accessor
You'll want to use this to get the value instead of reading the text, because the text could be out of date.
- - :
$('#basic_8').levelup('get');