大家好，欢迎来到IT知识分享网。
countup.js是切图网 qietu.com 在做页面前端制作时候常用的一款数字滚动插件，也是在众多数字滚动插件比如countto.js 等各种插件中对各种兼容性，效果，可扩展性等功能上进行评测后，依然觉得非常不错的一款，也是在切图项目中使用比例很高的一款，数字滚动在页面上非常常见，有利于提升页面的交互体验，特别是在可视化图表切图的时候，加上数字滚动可以增强页面交互效果。
countup.js配合waypoint.js可以实现滚动到页面某一个区域的时候开始滚动，下面要介绍的是如何通过countup.js实现多组数组滚动，并且每隔几秒滚动一次效果，原创 ，亲测可用，附代码：
html代码
<section class="numwrap"> <div id=""> <h1 class="jumbo" id="myTargetElement1">8431.35</h1> <span class="text">资产规模(亿元)</span> </div> <div id=""> <h1 class="jumbo" id="myTargetElement2">8431.35</h1> <span class="text">各项贷款(亿元)</span> </div> <div id=""> <h1 class="jumbo" id="myTargetElement3">8431.35</h1> <span class="text">各项存款(亿元)</span> </div> </section>JS代码
/* 初始滚动 * */ var randomNumber1 = Math.floor(Math.random() * 10000) + 1; var num1 = new CountUp("myTargetElement1", 0, randomNumber1, 2, 2.5, { useEasing : true, useGrouping : true, separator : ',', decimal : '.', prefix : '', suffix : '' }) num1.start(); var randomNumber2 = Math.floor(Math.random() * 10000) + 1; var num2 = new CountUp("myTargetElement2", 0, randomNumber2, 2, 2.5, { useEasing : true, useGrouping : true, separator : ',', decimal : '.', prefix : '', suffix : '' }) num2.start(); var randomNumber3 = Math.floor(Math.random() * 10000) + 1; var num3 = new CountUp("myTargetElement3", 0, randomNumber3, 2, 2.5, { useEasing : true, useGrouping : true, separator : ',', decimal : '.', prefix : '', suffix : '' }) num3.start(); /* 几秒执行一次 * */ setInterval(function(){ var randomNumber1_new = Math.floor(Math.random() * 10000) + 1; num1.update(randomNumber1_new); var randomNumber2_new = Math.floor(Math.random() * 10000) + 1; num2.update(randomNumber2_new); var randomNumber3_new = Math.floor(Math.random() * 10000) + 1; num3.update(randomNumber3_new); },4000)免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/87542.html
