首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第57天:匀速运动封装函数

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

作者头像
半指温柔乐
发布2018-09-11 14:55:27
3300
发布2018-09-11 14:55:27
举报
文章被收录于专栏:前端知识分享前端知识分享

一、动画的原理

动画的基本原理 : 让盒子的 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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-10-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档