在页面的动画效果中，经常有看到某个小块从一个地方移动到另一个地方的现象，现在，我们也来自己做一个这样的小动画，涉及到的基础包括定时器的使用和函数的使用
例如，我们要实现一个小方块从左面移动到右面，然后再从左面移动到右面，首先要做的事情是：
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>
运行的结果：是一样的：
