用TweenMax.js动画让数字动起来
html:
<div class="val2">0</div>
js:
let val2 = document.getElementsByClassName("val2")[0];
animateNum(val2, 36.3163, 4);
// 初始值 结束值 几个小数点
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
});
}
还有最重要的去官网下载
然后在引入
<script src="./lib/TweenMax.min.js"></script>
ok.....
用TweenMax.js动画让数字动起来的更多相关文章
- JS动画之缓动函数分析及动画库
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...
- CountUp.js用法 让数字动起来的插件
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
- js动画(四)
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
随机推荐
- Jenkins Html Rport 使用frame报错解决办法
对于Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow ...
- 【Linux开发】为qt-embedded添加jpeg库的交叉编译方法for arm
看了一个文章: =====================================谢论坛内各位的帮助,我的qt/e2.3.10和qtopia2.1.1终于全部编译通过. 下面是jpeg和uui ...
- eclipse sts 常规操作
项目:右键 refresh 右键 maven -> update project 重新remove add project 重启软件,电脑 1.项目冗余 Package Explorer ...
- Insertion Sort List(单链表插入排序)
来源:https://leetcode.com/problems/insertion-sort-list Sort a linked list using insertion sort. 方法: 1. ...
- java8 stream取出 最大值/最小值
注:转载请注明出处!!! 这里直接用取出多个对象中某个值 最大/最小 来进行举例 直接看代码 /** * 时间测试类 */ class TimeTest { private Date time; pu ...
- 本地项目代码上传至github
初始化本地目录:git init cd到个人本地项目代码文件目录下,执行git init命令 添加项目文件到本地仓库:git add . git commit -m "提交说明" ...
- [Bzoj1597][Usaco2008 Mar]土地购买(斜率优化)
题目链接 因为题目说可以分组,并且是求最值,所以斜率优化应该是可以搞的,现在要想怎么排序使得相邻的数在一个组中最优. 我们按照宽$w$从小到大,高$h$从小到大排序.这时发现可以筛掉一些一定没有贡献的 ...
- [集合]Map
Map集合的功能概述 a:添加功能 * V put(K key,V value):添加元素.* 如果键是第一次存储,就直接存储元素,返回null * 如果键不是第一次存在,就用值把以前的值替换掉, ...
- 华为云搭建windows+wordpress+xampp
1.如何将本地文件上传至华为云ECS云服务器(Windows系统) 1.1 在本地电脑上,快捷键“WIN+R"打开“运行”中输入“mstsc”,点击确定 1.2 在“远程桌面连接”框点击“ ...
- 使用 ELK 来分析你的支付宝账单
ELK 即 elasticsearch, logstash 以及 kibana.Elasticsearch 是一个基于 lucene 的分布式搜索引擎,logstash 是一种日志传输工具,也可以对日 ...