jquery.numscroll.js是一款jQuery数字滚动累加动画插件,使用该插件可以快速的制作出炫酷的数字累计动画特效
下载地址
效果展示

快速使用
1.引入jquery 和 jquery.numscroll.js
<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
2.拷贝以下布局结构
<p><span id="num0"></span></p>
<p><span id="num1"></span></p>
<p><span id="num2"></span></p>
3.创建numscroll对象
$(function() {
//num0
var num0 = 893689,addNum0,newNum0;
$('#num0').text(num0);
setInterval(function() {
addNum0 = Math.random()*1000;
newNum0 = parseInt(num0) + parseInt(addNum0);
num0 = newNum0;
$('#num0').numScroll({
number: newNum0
})
}, 1500)
//num1
var num1 = 893623.89,addNum1,newNum1;
$('#num1').text(num1);
setInterval(function() {
addNum1 = Math.random()*1000;
newNum1 = (parseFloat(num1) + parseFloat(addNum1)).toFixed(2);
num1 = newNum1;
$('#num1').numScroll({
number: newNum1
})
}, 1500)
//num2
var num2 = '893692813.89',addNum2,newNum2;
$('#num2').text(num2);
setInterval(function() {
addNum2 = Math.random()*10000;
newNum2 = (parseFloat(num2) + parseFloat(addNum2)).toFixed(2);
num2 = newNum2;
$('#num2').numScroll({
number: newNum2,
symbol: true
})
}, 1800)
})
支持参数
| 可选参数 | 默认值 | 说明 |
|---|---|---|
| number | 0 | 显示值 |
| step | 1 | 步长 |
| time | 2000 | 限制用时(为null时不限制) |
| delay | 0 | 延迟开始 |
| symbol | false | 是否显示分隔符 separators |
| fromZero | true | 是否从0开始计数(为否时从原有值开始计数) |