JS 动画之闪动,匀速,缓动。
由于本人记性不好,所以爱忘一些东西,现在将常用的写在这里。
废话不多说,直奔主题。
先是HTML部分。
<div id="div1"></div><button id="btn1">闪动!</button><button id="btn2">匀速!</button><button id="btn3">缓动!</button>
然后CSS部分
这里要注意
DIV必须带上绝对定位,不然运动不起来~~
#div1{
height: 200px;width: 200px;background: palevioletred;position: absolute;top: 100px;left: 0;}
JS部分
var div=document.getElementById("div1");var btn=document.getElementById("btn1");var btn2=document.getElementById("btn2");var btn3=document.getElementById("btn3");
闪动,顾名思义。就是闪过去,
// 闪动动画btn.onclick=function(){div.style.left="500px"};
匀速,就是一点点的移动。
这里注意,获得盒子左边的距离。要用到定时器了,但是注意不能用div.style.left进行计算,因为这样获取到的是带“ px ”的,不方便,还要提取数字,所以用offsetLeft最方便
// 匀速动画btn2.onclick=function(){setInterval(function(){div.style.left=div.offsetLeft+10+"px"},30);};
缓动动画,就是开始移动时候比较快,到一定距离慢下来。!