jQuery数字滚动动画

数字的滚动动画，挺适合做数据仪表盘或者动态展示页那种场景。比如股票价格波动、在线人数变化，用静态数字总觉得少了点味道。用 HTML 配上点 jQuery，就能轻松搞出一个平滑过渡的数字效果，响应也快，代码也不复杂。

页面结构先简单放个

#scrolling-number {
  font-size: 2em;
  color: #333;
  background-color: #f5f5f5;
  padding: 5px;
}

核心逻辑是用 jQuery 写个函数，根据目标值动态更新数字。得好的话，用户体验会提升不少。比如这样：

function scrollNumberTo(target) {
  var current = parseInt($("#scrolling-number").text());
  var step = Math.abs(current - target) / 20;
  var i = 0;
  var timer = setInterval(function() {
    if (Math.abs(current - target) <= 1) {
      $("#scrolling-number").text(target);
      clearInterval(timer);
    } else {
      current += (target > current ? step : -step);
      $("#scrolling-number").text(Math.round(current));
    }
  }, 50);
}

如果你想要自动滚，比如每秒加 1，那就配个setInterval：

setInterval(function() {
  var current = parseInt($("#scrolling-number").text());
  scrollNumberTo(current + 1);
}, 1000);

要注意别忘了引入 jQuery 库哦，老规矩：

[removed][removed]

如果你不想自己手撸，也可以试试别人写好的jQuery 数字滚动插件，省事不少。