最近弄智库，看见百度文库有个文档数的数字在页面加载完后会有个小动画，数字一直向上刷，给人的感觉是文档数量一直在不断的增加。看了下实现效果，自己模拟了下，还挺不错的，效果如下：
智库已有文档
,
份
说说原理吧，首先将数字按竖排的方式拼成CSS Sprite，然后定义好背景，通过JS改变背景的position的值，需要把数字和背景关联起来哦。因为数字是竖排的，所以在执行animate动画的时候，会有快有慢，这就形成了这个效果。
关键代码：
$(this).animate({
'backgroundPositionX': '0px',
'backgroundPositionY': '-' + nums + 'px'
}, 1500);
注意：需要注意的是：背景图定位的CSS属性在JS里要用 backgroundPositionX 和 backgroundPositionY 哦，backgroundPosition 这样写带属性是不生效的。
HTML代码：
智库已有文档
,
份
CSS代码：
.paper-wrap {
width: 233px; height: 155px;
margin: 0 50px;
background: #f1f1f1;
color: #333;
font-family: 'Microsoft YaHei',Arial;
text-align: center;
}
.paper-wrap .title {
margin-bottom: 25px;
padding-top: 10px;
font-size: 18px;
}
.paper-wrap .nums {
margin: 10px auto 10px;
}
.paper-wrap span {
display: inline-block;
width: 19px; height: 30px;
background: url(../images/effect/numroll.png) no-repeat;
}
.paper-wrap em {
font-size: 14px;
vertical-align: 5px;
}
.paper-wrap .unit {
vertical-align: 10px;
}
jQuery代码：
$(function() {
var $wrap = $('.js-nums'),
nums;
$wrap[0] && $wrap.find('.num').each(function() {
nums = $(this).data('num') * 30;
$(this).animate({
'backgroundPositionX': '0px',
'backgroundPositionY': '-' + nums + 'px'
}, 1500);
});
});
本文地址：/effect/num-to-roll.html
文章若需转载，请附上原文链接，谢谢配合。^_^
