定时器和函数的使用初级------移动一个div元素

在页面的动画效果中，经常有看到某个小块从一个地方移动到另一个地方的现象，现在，我们也来自己做一个这样的小动画，涉及到的基础包括定时器的使用和函数的使用

例如，我们要实现一个小方块从左面移动到右面，然后再从左面移动到右面，首先要做的事情是：

1.指定一个开关，点击的时候，开始左移或者开始右移

2.设置需要移动的元素块，为了醒目，我们把需要移动的元素设置背景为红色，设置定位属性为：绝对定位：absolute

3.开启一个定时器

4.设定需要移动的步长：speed

5.设置需要移动到的目标点：target

6.因为要移动元素，也就是要设置元素的left 属性，而获取元素属性的时候，不同的浏览器获取方式不一样，所以需要先写一个属性获取的函数，getStyle()

7.写一个左移的函数

8. 写一个右移的函数

需要注意的一点：定时器，使用的时候，记得先关后开，即使用前先清除

如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div.box {
10             position: relative;
11         }
12         div.tar {
13             top: 5em;
14             left: 2em;
15             position: absolute;
16             left: 0;
17             width: 100px;
18             height: 100px;
19             background: #f33;
20         }
21         div.mubiao {
22             position: absolute;
23             left: 0;
24             width: 500px;
25             height: 200px;
26             border: 1px solid #888;
27         }
28     </style>
29     <script>
30         window.onload = function () {
31             var Ainput = document.getElementsByTagName("input");
32             var Odiv = document.getElementById("tar");
33             Odiv.timer = null;
34             var timer = null;
35             var speed = 10;
36             Ainput[0].onclick = function () {
37                 clearTimeout(Odiv.timer);
38                 Odiv.timer = setInterval(domoveleft, 100);
39             };
40             Ainput[1].onclick = function () {
41                 clearTimeout(Odiv.timer);
42                 Odiv.timer = setInterval(domoveright, 100);
43             };
44             function domoveleft() {
45                 var Ocurleft = parseInt(getStyle(Odiv, 'left'));
46                 var target = 500;
47                 var Onextleft = Ocurleft + speed;
48                 if (Onextleft >= target) {
49                     Odiv.style.left = target + 'px';
50                     clearTimeout(Odiv.timer);
51                 } else {
52                     Odiv.style.left = Onextleft + 'px';
53                 }
54             };
55             function domoveright() {
56                 var Ocurleft = parseInt(getStyle(Odiv, 'left'));
57                 var target = 0;
58                 var Onextleft = Ocurleft - speed;
59                 if (Onextleft <= target) {
60                     Odiv.style.left = target + 'px';
61                     clearTimeout(Odiv.timer);
62                 } else {
63                     Odiv.style.left = Onextleft + 'px';
64                 }
65             }
66         }
67         function getStyle(obj, attr) {
68             return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, 'huanying2015')[attr];
69         }
70     </script>
71 </head>
72 <body>
73     <div class="box">
74         <input type="button" value="向右">
75         <input type="button" value="向左">
76         <div class="tar" id="tar"></div>
77         <div class="mubiao"></div>
78     </div>
79 </body>
80 </html>

运行结果：

上面的函数，可以简写如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div.box {
10             position: relative;
11         }
12         div.tar {
13             top: 5em;
14             left: 2em;
15             position: absolute;
16             left: 0;
17             width: 100px;
18             height: 100px;
19             background: #f33;
20         }
21         div.mubiao {
22             position: absolute;
23             left: 0;
24             width: 500px;
25             height: 200px;
26             border: 1px solid #888;
27         }
28     </style>
29     <script>
30         window.onload = function () {
31             var Ainput = document.getElementsByTagName("input");
32             var Odiv = document.getElementById("tar");
33             Ainput[0].onclick = function () {
34                 domove(Odiv, 'left', 10, 500);
35             };
36             Ainput[1].onclick = function () {
37                 domove(Odiv, 'left', 10, 0);
38             }
39             function domove(obj, attr, speed, target) {
40                 clearInterval(obj.timer);
41                 var Ocurposition = parseInt(getStyle(obj, attr));
42                 speed = Ocurposition < target ? speed : -speed;
43                 obj.timer = setInterval(function () {
44                     var Ocurposition = parseInt(getStyle(obj, attr));
45                     var nextposition = Ocurposition + speed;
46                     if (nextposition >= target && speed > 0 || nextposition <= target && speed < 0) {
47                         nextposition = target;
48                     }
49                     obj.style[attr] = nextposition + 'px';
50                     if (nextposition == target) {
51                         clearInterval(obj.timer);
52                     }
53                 }, 100);
54             }
55         }
56         function getStyle(obj, attr) {
57             return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, 'huanying2015')[attr];
58         }
59     </script>
60 </head>
61 <body>
62     <div class="box">
63         <input type="button" value="向右">
64         <input type="button" value="向左">
65         <div class="tar" id="tar"></div>
66         <div class="mubiao"></div>
67     </div>
68 </body>
69 </html>

运行的结果：是一样的：

posted on 2018-05-09 20:58 huanying2015 阅读(308) 评论(0) 编辑收藏举报