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

当前位置:主页 > jQuery库 > 布局和界面 > 类似电子游戏积分增加减少特效的jQuery数字动画插件
类似电子游戏积分增加减少特效的jQuery数字动画插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-06-20
    阅读:
简要教程

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

网友评论