当前位置：首页 > 网页特效 > 动画效果

类似电子游戏积分增加减少特效的jQuery数字动画插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.levelup.js"></script> 
```
#####  HTML结构
你可以使用一个span元素来包裹需要制作数字动画的数字。

```html
<span>counter <span style="font-weight: bold;" id='the_cnt'>0</span></span>
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该数字动画插件。

```html
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| 无| 获取当前的数值|

web299.com

类似电子游戏积分增加减少特效的jQuery数字动画插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果