【JS动画基础】闪动，匀速，缓动。

最新推荐文章于 2021-06-29 23:08:07 发布

张大丶

最新推荐文章于 2021-06-29 23:08:07 发布

阅读量384

点赞数

分类专栏： Javascript 文章标签： JS javascript 动画基础

本文链接：https://blog.csdn.net/fhgyt1229/article/details/62882932

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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);
        };

缓动动画，就是开始移动时候比较快，到一定距离慢下来。！