用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字啊,又是这个梗..怎么办?说些什么 ...
随机推荐
- Ehlib好用的版本
EhLib 6.2
- LAMP框架
一基本常识 LNMP (Linux + Nginx + MySQL + PHP) LAMP (Linux + Apache + MySQL + PHP) //php作为Apache的模块Apache. ...
- vue中的$EventBus.$emit、$on的应用
今天在项目中遇到的一个需求: 在一个选项卡功能的页面,出现的问题是,当点击选项卡的某个选项时,会同时加载整个选项卡的数据,本身产品就很大,数据很多,所以这个问题无法忽略: 仔细研究下发现,当刚进入页面 ...
- Linux常用命令基础
linux 常用指令 基础命令 宿主目录 目录结构 文件管理 目录管理 用户管理 别名管理 压缩包管理 网络设置 shell技巧 帮助方法 /表示根目录 ~表示家目录 软件的安装(光盘中的软件呢): ...
- 大数据平台CentOS7+CDH5.12.1集群搭建
1.CM(Cloudera Manager)介绍 1.1 简介 Cloudera Manager是一个拥有集群自动化安装.中心化管理.集群监控.报警功能的一个工具,使得安装集群从几天的时间缩短在几个小 ...
- mock.js的运用
一:概念 Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax 请求,生成并返回模拟数据 基于 H ...
- W同学的新画板 QDUOJ 线段树 区间颜色段数
W同学的新画板 QDUOJ 线段树 区间颜色段数 原题链接 题意 W同学在每天的刻苦学习完成功课之余,都会去找一些有趣的事情来放松自己:恰巧今天他收到了朋友送给他的一套画板,于是他立刻拆开了包装,拿出 ...
- 中标麒麟(linux)mysql配置记录
刚装好mysql时,使用正常,后来再次使用时,连接不成功.(虚拟机中) 配置网络有问题, 1.我将ifcfg-*的两个文件备份后删除了. 2.点击右下角的小电脑,重新新建一个网络连接.把网络接入主机的 ...
- CentOS卸载lamp环境的步骤
学习PHP的时候需要在CentOS系统下安装lamp环境,安装容易卸载就没那么简单了,因为lamp由Apache.MySQL.PHP三个部分构成,需要逐个卸载,小编就给大家介绍下CentOS卸载lam ...
- TypeScript ES6-Promise 递归遍历文件夹中的文件
貌似很多人都爱用这个作为写文章的初尝试,那来吧.遍历文件夹下的所有文件,如遍历文件夹下并操作HTML/CSS/JS/PNG/JPG步骤如下:1.传入一个路径,读取路径里面所有的文件:2.遍历读取的文件 ...