jquery仿百度文库数字滚动效果

去年做的易造价云文库中有一个数字滚动的效果:效果请看:http://wenku.91zaojia.com/

今天,我的百度博客上有网友私信联系我,希望我共享这个源码,今天在这里把这个源码共享一下,后期可能这些源码都在我的前端资料库中共享!(ps前端资料库正在建设中....敬请期待!)

百度文库刷新页面之后数字由0滚动到9。

思路,背景图片滚动,根据数字多少,进行相应的滚动。

要引用一个jquery插件animateBackground-plugin.js

<script type="text/javascript" src="http://www.xyhtml5.com/post/jquery_gundong/js/jquery.js"></script>
<script type="text/javascript" src="http://www.xyhtml5.com/post/jquery_gundong/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>
<div>
<div>
下载量:<span></span>次
</div>
<input type="hidden" value="">
</div>
</div>

demo演示 demo下载

以上是jquery仿百度文库数字滚动效果的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>