html数字动画效果,数字滚动动画效果

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

智库已有文档

,

份

说说原理吧，首先将数字按竖排的方式拼成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 Y