自制數字滾動JS插件分享

NumScroll 數字滾動累加動畫插件

jquery.numscroll.js是一款jQuery數字滾動累加動畫插件，使用該插件能夠快速的製做出炫酷的數字累計動畫特效

下載地址

github.com/chaorenzeng…

效果展現

快速使用

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開始計數（爲否時從原有值開始計數）