数字滚动动画效果

最近弄智库，看见百度文库有个文档数的数字在页面加载完后会有个小动画，数字一直向上刷，给人的感觉是文档数量一直在不断的增加。看了下实现效果，自己模拟了下，还挺不错的，效果如下：

说说原理吧，首先将数字按竖排的方式拼成 CSS Sprite，然后定义好背景，通过JS改变背景的 position 的值，需要把数字和背景关联起来哦。因为数字是竖排的，所以在执行animate 动画的时候，会有快有慢，这就形成了这个效果。

关键代码：

$(this).animate({
    'backgroundPositionX': '0px',
    'backgroundPositionY': '-' + nums + 'px'
}, 1500);

注意：需要注意的是：背景图定位的CSS属性在JS里要用 backgroundPositionX 和 backgroundPositionY 哦，backgroundPosition 这样写带属性是不生效的。

HTML代码：

<div class="paper-wrap">
    <p class="title">智库已有文档</p>
    <p class="nums js-nums">
        <span class="num" data-num="1"></span>
        <span class="num" data-num="7"></span>
        <span class="num" data-num="3"></span>
         <em>,</em>
        <span class="num" data-num="9"></span>
        <span class="num" data-num="6"></span>
        <span class="num" data-num="2"></span>
        <em class="unit">份</em>
    </p>
</div>

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);
    });
});

素材如下：