码迷,mamicode.com
首页 > 其他好文 > 详细

tweenMax+如何让数字由初始值动画到结束的值

时间:2019-09-12 18:05:16      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:div   http   mamicode   nim   document   引入   on()   col   小数   

技术图片

 

 html:

<div class="wz1">0</div>

css:

.wz1{
width: 114px;
height: 30px;
position: absolute;
top: 40px;
left: 75px;
color:#fff;
font-size: 30px;
}

 

js:(写在预加载函数中)

let val2 = document.getElementsByClassName("wz2")[0];
animateNum(val2, 8397, 0);

// 初始值 结束值 几个小数点
function animateNum(dom, val, dot){
let obj = {num1: dom.innerHTML};
TweenMax.to(obj, 1, {
num1: val,
onUpdate:function(){
dom.innerHTML=obj.num1.toFixed(dot);
},
delay: 0.1
});
}

如果报错了,继续往下拉--  

 

 

 

 

 

 

 

 

记得引入tweenmax.js的插件哦

 

tweenMax+如何让数字由初始值动画到结束的值

标签:div   http   mamicode   nim   document   引入   on()   col   小数   

原文地址:https://www.cnblogs.com/snowbxb/p/11514205.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!