JS实现用动画展示数字
有时我们需要动态的展示数字等效果,这样来让我们的网站更炫更新颖,让人有更强的创作欲望。我们可以用CountUp.js、jquery-animateNumber这两个中的任意一个插件去实现。
CountUp.js是一个没有任何依赖的,轻量级的JavaScript类,可以用来快速创建动画显示数值数据以一种更有趣的方式。
1、引入CountUp.js
1 | <script type="text/javascript" src="./js/countUp.min.js"></script> |
2、CountUp.js具体的参数和实现的效果
1 | <h1 id="myTargetElement">2,392</h1> |
1 2 3 4 5 6 7 8 9 10 | var options = { useEasing : true, useGrouping : true, separator : ',', //数字格式化分隔符,useGrouping 为true时有效 decimal : '.', //小数的分隔符 prefix : '', //数字前缀 suffix : '' //数字后缀 }; var demo = new CountUp("myTargetElement", 0, 2392, 0, 2.5, options); demo.start(); |
这个你可以设置target:目标元素,startVal:开始值,endVal: 结束值,decimals: 小数位数,默认值是0,duration: 多少秒执行完,默认值是2。
CountUp.js官网:https://github.com/inorganik/countUp.js
jQuery数字动画插件jquery-animateNumber,添加了数数的效果和阶跃函数jQuery的动画功能属性。
1、引入jquery和jquery-animateNumber插件
1 2 | <script src="./js/jquery-1.7.0.min.js"></script> <script src="./js/jquery.animateNumber.js"></script> |
2、jquery-animateNumber具体的参数和效果
1 2 | //简单的例子 <p>This plugin only <span id="lines">0</span> lines of code.</p> |
1 | $('#lines').animateNumber({ number: 165 }); |
1 2 | //倒计时 <p id="revese-countdown">10</p> |
1 2 3 4 5 6 7 8 | $('#revese-countdown').prop('number', 10).animateNumber({ number: 0, numberStep: function(now, tween) { var target = $(tween.elem), rounded_now = Math.round(now); target.text(now === tween.end ? 'Launch!' : rounded_now); } },10000,'linear'); |
//计时器
1 | <p id="countdown">10</p> |
1 2 3 4 5 | $('#countdown').animateNumber({ number: 10 },'normal',function() { $('#countdown').text('Countdown completed!') }); |
jquery-animateNumber.js官网:https://github.com/aishek/jquery-animateNumber
jquery-animateNumber.js官网Demo:http://aishek.github.io/jquery-animateNumber/
来源:JS实现用动画展示数字
2019年5月9日 上午1:26
好文章!666,学习了
2019年5月10日 下午1:05
好文章!666,学习了