第57天：匀速运动封装函数

最新推荐文章于 2023-01-02 21:27:42 发布

lelara

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量214

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/lelara/article/details/84577928

版权

javascript 专栏收录该内容

68 篇文章 1 订阅

订阅专栏

一，动画的原理

动画的基本原理：让盒子的offsetLeft +步长

Math.abs（-5）， 取绝对值函数

二，匀速运动封装函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>匀速动画封装</title>
 6     <style>
 7         div{
 8             width: 100px;
 9             height: 100px;
10             background-color: yellow;
11             position: absolute;
12         }
13     </style>
14 </head>
15 <body>
16 <button id="btn1">200</button>
17 <button id="btn2">400</button>
18 <div id="box"></div>
19 </body>
20 </html>
21 <script>
22     var btn1=document.getElementById("btn1");
23     var btn2=document.getElementById("btn2");
24     var box=document.getElementById("box");
25     btn1.onclick=function(){
26         animate(box,200);
27     }
28     btn2.onclick=function(){
29         animate(box,400);
30     }
31     //封装匀速运动
32     function animate(obj,target){
33         var speed=obj.offsetLeft < target ? 5 : -5;//用来判断是+还是-
34         obj.timer=setInterval(function(){
35             var result=target-obj.offsetLeft;//差值不会大于5
36             obj.style.left=obj.offsetLeft+speed+"px";
37             if(Math.abs(result)<=5){//如果差值不小于5 到位置了
38                 clearInterval(obj.timer);
39                 obj.style.left=target+"px";//有5px差距直接跳转
40             }
41         },20)
42     }
43 </script>

lelara

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第57天：匀速运动封装函数

一，动画的原理动画的基本原理：让盒子的offsetLeft +步长 Math.abs（-5），取绝对值函数二，匀速运动封装函数 1 &lt;!DOCTYPE html&gt; 2 &lt;html lang="en"&gt; 3 &lt;head&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;titl
复制链接

扫一扫

专栏目录