jQuery数字滚动累加动画效果

一款jQuery数字滚动累加动画效果，页面加载后有一个初始值的数字，之后变开始不断累加，最后的数字有滚动的效果，前一位一次往上递增。

分类：文字特效 > 文字滚动难易：初级

查看演示下载资源下载积分： 10 积分

页面的head部分，需设置好页面元素的样式，引入jQuery库和数字滚动插件，并设置好对应的参数，代码如下：

<style type="text/css">
#all{
	width: 100%;
	margin: 0 auto;
	background: #ffffff;
}
#all .t_num i {
	width: 33px;
	height: 47px;
	display: inline-block;
	background: url(img/number1.png) no-repeat;
	background-position: 0 0;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/digitalScroll.js"></script>
<script type="text/javascript">
var sum = 13000;
$(function() {
	setInterval(function(){
		show_num1(sum)
	},1000);
});

function show_num1(n) {
	sum=sum+5;
	console.log(n);
	var it = $(".t_num1 i");
	var len = String(n).length;
	for(var i = 0; i < len; i++) {
		if(it.length <= i) {
			$(".t_num1").append("<i></i>");
		}
		var num = String(n).charAt(i);
		//根据数字图片的高度设置相应的值
		var y = -parseInt(num) * 58;
		var obj = $(".t_num1 i").eq(i);
		obj.animate({
			backgroundPosition: '(0 ' + String(y) + 'px)'
		}, 'slow', 'swing', function() {});
	}
	$("#cur_num").val(n);
}
</script>

页面的body部分，需设置好数字的对应容器，代码如下：

<div id="all">
	<span class="t_num t_num1"></span>
</div>