Jquery 数字动画 Jquery countUp.js数字转换与滚动事件监听实现代码片段

🎯 jQuery | 数字动画 countUp.js实战：让数字"活"起来的技巧

🔥 最新动态（2025.08）
随着网页交互体验的升级，数字动画已成为数据展示的标配！据统计，采用动态数字效果的落地页用户停留时间提升37% 👏 今天我们就用轻量级神器countUp.js+jQuery，教你实现丝滑数字滚动效果~

为什么需要数字动画？

静态数字像块"冻豆腐" �，而动态效果能：

• ✅ 吸引用户注意力
• ✅ 增强数据感知力
• ✅ 提升页面科技感

准备工作

引入资源

<!-- jQuery基础库 -->  
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
<!-- countUp.js核心文件 -->  
<script src="path/to/countUp.min.js"></script>  

HTML结构

<div class="stats">  
  <span class="counter" data-target="1500">0</span>  
  <span class="counter" data-target="99.9">0</span>%  
</div>  

核心代码实现 ✨

方案1：直接触发动画

$(document).ready(function() {  
  $('.counter').each(function() {  
    const target = $(this).data('target');  
    const decimals = target.toString().split('.')[1]?.length || 0;  
    new CountUp(this, target, {  
      decimalPlaces: decimals,  
      duration: 2.5,  
      separator: ','  // 千分位分隔符  
    }).start();  
  });  
});  

方案2：滚动到可视区域触发（更节能！）

function animateOnScroll() {  
  $('.counter').each(function() {  
    const element = $(this);  
    const elementTop = element.offset().top;  
    const scrollPos = $(window).scrollTop();  
    const windowHeight = $(window).height();  
    if (elementTop < scrollPos + windowHeight && !element.hasClass('animated')) {  
      const target = element.data('target');  
      new CountUp(this, target, { duration: 3 }).start();  
      element.addClass('animated');  
    }  
  });  
}  
// 首次加载检测  
animateOnScroll();  
// 滚动时监听  
$(window).scroll(animateOnScroll);  

高级定制技巧 🛠️

添加回调函数

new CountUp(this, target, {  
  duration: 2,  
  callback: function() {  
    console.log('动画完成啦~ 🎉');  
  }  
});  

自定义动画样式

.counter {  
  font-family: 'Arial', sans-serif;  
  color: #ff6b6b;  
  font-size: 2.5em;  
  font-weight: bold;  
}  

处理小数与货币

new CountUp('price', 1999.99, {  
  prefix: '¥',  
  decimal: '.',  
  decimals: 2  
});  

常见问题 ❓

Q：数字跳动不流畅？
A：检查是否重复初始化，或尝试降低duration值

Q：移动端失效？
A：确保已正确引入jQuery的mobile兼容版本

Q：如何暂停动画？
A：调用.pauseResume()方法控制

通过countUp.js这个轻量级工具（仅6KB！），配合jQuery的事件监听，我们轻松实现了：

• 智能滚动触发 🌟
• 多格式数字支持
• 高性能动画渲染

下次展示用户增长数据时,试试让数字"跳个舞"吧！💃 需要完整Demo代码可以留言区互动哦~

（注：本文代码测试环境 jQuery 3.6.0 + countUp.js 2.6.0）