第57天：匀速运动封装函数
一、动画的原理
动画的基本原理 ： 让盒子的 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 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
