本文介绍了一种使用jQuery插件animateBackground-plugin.js实现数字从0滚动到指定数字的效果。通过背景图片滚动模拟数字变化，适用于展示计数器等场景。
如下图：
百度文库刷新页面之后数字由0滚动到9。最近总结了一个这个效果！
思路，背景图片滚动，根据数字多少，进行相应的滚动。
要引用一个jquery插件animateBackground-plugin.js
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/animateBackground-plugin.js"></script>
用法如下：
<script type="text/javascript">
$(function(){
show_num(12566);
});
function show_num(n){
var it = $(".t_num i");
var len = String(n).length;
for(var i=0;i<len;i++){
if(it.length<=i){
$(".t_num").append("<i></i>");
}
var num=String(n).charAt(i);
var y = -parseInt(num)*30;
var obj = $(".t_num i").eq(i);
obj.animate({
backgroundPosition :'(0 '+String(y)+'px)'
}, 'slow','swing',function(){}
);
}
$("#cur_num").val(n);
}
</script>
</head>
<body>
<div id="main">
<div class="demo">
<div id="total">
下载量：<span class="t_num"></span>次
</div>
<input type="hidden" id="cur_num" value="">
</div>
</div>
由于源码是本人整理，为了防止源码泄露，demo下载请联系我！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
