今天给大家分享一款基于jQuery的炫酷的数字动态加载到指定数值的效果例子。
先引入文件:www.021jwmx.com/template/jw/index/skin/js/jquery.countup.min.js 也可以直接下载使用,还需要jQuery的基础库,那个可以使用任何一个版本都行。
<ul class="ul-txt" data-wow-duration="1s" data-wow-delay=".1s">
<li>
<p>从业经验</p>
<div class="txt"> <span class="counter">15</span> 年+ </div>
</li>
<li>
<p>专业人员</p>
<div class="txt"> <span class="counter">200</span>人+ </div>
</li>
<li>
<p>工厂面积</p>
<div class="txt"> <span class="counter">7000</span>㎡ </div>
</li>
<li>
<p>模型种类</p>
<div class="txt"> <span class="counter">10000</span>余件 </div>
</li>
<li>
<p>服务行业</p>
<div class="txt"> <span class="counter">20</span> 多个 </div>
</li>
</ul>
因为是加载时需要执行,所以js代码也不能少
<script type="text/javascript">
$('.counter').countUp({
delay: 10,
time: 2000
});
</script>
运行效果:www.021jwmx.com 运行就可以直接看到