移動動畫封裝之封裝講解
阿新 • • 發佈：2018-01-01
input utf-8 fun 停止 hide ima 自己 gpo onclick 
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: absolute01-用offsetLeft做移動動畫.html; 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 31document.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>
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
移動動畫封裝之封裝講解