<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery数字滚动增加动画特效</title>
<style>
#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>
</head>
<body>
<div id="all">
<span class="t_num t_num1"></span>
</div>
</body>
</html>
