<!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><script src="/demos/googlegg.js"></script>
<div id="all">
<span class="t_num t_num1"></span>
</div>
</body>
</html>
jQuery数字滚动增加动画特效.zip （5个子文件） 
js 
digitalScroll.js 2KB jquery.min.js 91KB img 
num_bg.png 371B number1.png 3KB
index.html 1KB资源评论
码云笔记
- 粉丝: 3w+
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
