移动动画封装之封装讲解

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <style>
 8         #box {
 9             width: 100px;
10             height: 100px;
11             background-color: red;
12             position: absolute;
13         }
14     </style>
15 </head>
16 <body>
17 
18 <input type="button" value="移动到400" id="btn400"/>
19 
20 <div id="box"></div>
21 
22 </body>
23 </html>
24 
25 
26 <script>
27     //找到要移动的div
28     var box = document.getElementById("box");
29 
30 
31     document.getElementById("btn400").onclick = function () {
32 
33         var timerID = setInterval(function () {
34 
35             //先取到当前的距离
36             var currentLeft = box.offsetLeft;
37 
38             //设置每步走的步长
39             var step = 10;
40 
41             //先用目标-当前位置 看是否够走一步
42             if (400 - currentLeft >= step) {
43 
44                 //再当前距离上+10
45                 currentLeft += step;
46 
47                 box.style.left = currentLeft + "px";
48 
49             } else {
50 
51                 //不够走，就让它直接到400
52                 currentLeft = 400;
53                 box.style.left = currentLeft + "px";
54 
55                 //停止计时器
56                 clearInterval(timerID);
57             }
58 
59         }, 1);
60     };
61 
62 </script>

01-用offsetLeft做移动动画.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <style>
 8         #box {
 9             width: 100px;
10             height: 100px;
11             background-color: red;
12             position: absolute;
13         }
14     </style>
15 </head>
16 <body>
17 
18 <input type="button" value="移动到400" id="btn400"/>
19 <input type="button" value="移动到800" id="btn800"/>
20 
21 
22 <div id="box"></div>
23 
24 </body>
25 </html>
26 
27 
28 <script>
29     //找到要移动的div
30     var box = document.getElementById("box");
31 
32 
33     document.getElementById("btn400").onclick = function () {
34 
35         animate(400);
36     };
37 
38 
39     document.getElementById("btn800").onclick = function () {
40 
41         animate(800);
42     };
43 
44 
45     function animate(target) {
46 
47         var timerID = setInterval(function () {
48 
49             //先取到当前的距离
50             var currentLeft = box.offsetLeft;
51 
52             //设置每步走的步长
53             var step = 10;
54 
55             //先用目标-当前位置 看是否够走一步
56             if (target - currentLeft >= step) {
57 
58                 //再当前距离上+10
59                 currentLeft += step;
60 
61                 box.style.left = currentLeft + "px"
62 
63             } else {
64 
65                 //不够走，就让它直接到目标
66                 currentLeft = target;
67                 box.style.left = currentLeft + "px";
68 
69                 //停止计时器
70                 clearInterval(timerID);
71             }
72 
73         }, 50);
74     }
75 </script>

02-移动动画的封装之一.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <style>
 8         #red, #blue {
 9             width: 100px;
10             height: 100px;
11             background-color: red;
12             position: absolute;
13         }
14 
15         #blue {
16             background-color: blue;
17             top: 150px;
18         }
19     </style>
20 </head>
21 <body>
22 
23 <input type="button" value="移动红色到400" id="btnRed"/>
24 <input type="button" value="移动蓝色到400" id="btnBlue"/>
25 
26 
27 <div id="red"></div>
28 <div id="blue"></div>
29 
30 </body>
31 </html>
32 
33 
34 <script>
35 
36     var red = document.getElementById("red");
37     var blue = document.getElementById("blue");
38 
39     document.getElementById("btnRed").onclick = function () {
40 
41         animate(red, 400);
42     };
43 
44     document.getElementById("btnBlue").onclick = function () {
45 
46         animate(blue, 400);
47     };
48 
49     //红色的只能停红色的计时器
50     //蓝色的只能停蓝色的计时器
51     //自己的计时器，只能让自己停，其他人不能停
52 
53     //obj代表要移动的元素
54     //target代表要移动的位置
55 
56     function animate(obj, target) {
57 
58         clearInterval(obj.timerID);
59 
60         obj.timerID = setInterval(function () {
61 
62             //先取到当前的距离
63             var currentLeft = obj.offsetLeft;
64 
65             //设置每步走的步长
66             var step = 10;
67 
68             //先用目标-当前位置 看是否够走一步
69             if (target - currentLeft >= step) {
70 
71                 //再当前距离上+10
72                 currentLeft += step;
73 
74                 obj.style.left = currentLeft + "px"
75 
76             } else {
77 
78                 //不够走，就让它直接到目标
79                 currentLeft = target;
80                 obj.style.left = currentLeft + "px";
81 
82                 //停止计时器
83                 clearInterval(obj.timerID);
84             }
85 
86             console.log(obj.timerID + "在运行");
87 
88         }, 50);
89     }
90 </script>

03-移动动画的封装之二.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <style>
 8         #red, #blue {
 9             width: 100px;
10             height: 100px;
11             background-color: red;
12             position: absolute;
13         }
14 
15         #blue {
16             background-color: blue;
17             top: 150px;
18         }
19     </style>
20 </head>
21 <body>
22 
23 <input type="button" value="移动红色到400" id="btnRed"/>
24 <input type="button" value="移动蓝色到400" id="btnBlue"/>
25 
26 
27 <div id="red"></div>
28 <div id="blue"></div>
29 
30 </body>
31 </html>
32 
33 
34 <script>
35 
36     var red = document.getElementById("red");
37     var blue = document.getElementById("blue");
38 
39     document.getElementById("btnRed").onclick = function () {
40 
41         animate(red, 400);
42     };
43 
44     document.getElementById("btnBlue").onclick = function () {
45 
46         animate(blue, 400);
47     };
48 
49     //红色的只能停红色的计时器
50     //蓝色的只能停蓝色的计时器
51     //自己的计时器，只能让自己停，其他人不能停
52 
53     //obj代表要移动的元素
54     //target代表要移动的位置
55 
56     function animate(obj, target) {
57 
58         clearInterval(obj.timerID);
59 
60         obj.timerID = setInterval(function () {
61 
62             //先取到当前的距离
63             var currentLeft = obj.offsetLeft;
64 
65             //设置每步走的步长
66             var step = 10;
67 
68             //先用目标-当前位置 看是否够走一步
69             if (target - currentLeft >= step) {
70 
71                 //再当前距离上+10
72                 currentLeft += step;
73 
74                 obj.style.left = currentLeft + "px"
75 
76             } else {
77 
78                 //不够走，就让它直接到目标
79                 currentLeft = target;
80                 obj.style.left = currentLeft + "px";
81 
82                 //停止计时器
83                 clearInterval(obj.timerID);
84             }
85 
86             console.log(obj.timerID + "在运行");
87 
88         }, 50);
89     }
90 </script>

04-移动动画函数的封装之三.html

posted @ 2018-01-01 17:09 Fanyee 阅读(218) 评论(0) 编辑收藏举报

刷新页面返回顶部

fanyee

interesting amusing

移动动画封装之封装讲解