js缓动动画函数封装

最新推荐文章于 2023-01-06 10:16:05 发布

Gui_wawa

最新推荐文章于 2023-01-06 10:16:05 发布

阅读量647

点赞数

分类专栏： js特效

本文链接：https://blog.csdn.net/Gui_wawa/article/details/52831463

版权

js特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 300px;
            height: 200px;
            background-color: pink;
            margin-top: 50px;
            position:absolute;
        }
    </style>
</head>
<body>
<input type="button" value="点击移动到400px" id="btn1"/>
<input type="button" value="点击移动到800px" id="btn2"/>
<div id="dv"></div>
 <script>
     function my$(id){
         return document.getElementById(id);
     }
     var btn1=my$("btn1");
     var btn2=my$("btn2");
     var dv=my$("dv");    //点击btn1层开始移动
    btn1.onclick=function(){        animate(dv,400);    }; //点击btn2层开始移动
     btn2.onclick=function(){        animate(dv,800);     };     function animate(element,target){      //首先清除历史定时器，一个盒子只能有一个定时器，在使用定时器之前要清除历史定时器，防止发生冲突      //定时器本身将成为该层的一个属性      clearInterval(element.timeId);      element.timeId=setInterval(function(){      var current=element.offsetLeft;      var step=(target-current)/10;//缓动动画：每次移动的步数在减少（类似于生活中的电梯停止，汽车刹车）      step=step>0?Math.ceil(step):Math.floor(step);      current=current+step;      if(Math.abs(step)>Math.abs(target-current)){      clearInterval(element.timeId);      element.style.left=target+"px";      }else{      element.style.left=current+"px";      }      },20);      }</script></body></html>