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/

站长QQ:739696033 | 微信:bing-0719:Bcoder资源网 » JS实现用动画展示数字


扫描二维码关注微信公众号:“bcoder-cn 声明:本站内容部分来自互联网,仅供交流学习之用,请勿作商业用途,版权归原作者所有。如果有侵犯到您的权益,请提供相关证明联系本站删除,谢谢合作!
赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址