简单函数封装思想（实现简单的动画）
小技巧：
// && 有则调用，没有则不调用
callback && callback()
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 #box1 { 11 position: absolute; 12 top: 0; 13 left: 0; 14 width: 100px; 15 height: 100px; 16 background-color: gray; 17 } 18 19 #box2 { 20 position: absolute; 21 top: 200px; 22 left: 0; 23 width: 100px; 24 height: 100px; 25 background-color: yellow; 26 } 27 28 #box3 { 29 position: absolute; 30 top: 0; 31 left: 800px; 32 width: 0; 33 height: 1000px; 34 border-left: 1px solid black; 35 } 36 </style> 37 <script> 38 window.onload = function () { 39 //创建一个可以执行简单动画的函数 40 // 参数： 41 // obj：要执行动画的对象 42 // attr：要执行动画的样式 43 // target： 要执行动画的目标位置 44 // speed： 动画的速度 45 // callback：回调函数，在动画执行完毕后执行 46 function move(obj, attr, target, speed, callback) { 47 clearInterval(obj.timer) 48 let current = parseInt(getComputedStyle(obj, null)[attr]) 49 if (current > target) { 50 speed = -speed 51 } 52 // 向执行动画的对象中添加一个timer属性，用来保存自己的定时器标识 53 obj.timer = setInterval(function () { 54 let oldValue = parseInt(getComputedStyle(obj, null)[attr]) 55 // alert(oldValue) 56 let newValue = oldValue + speed 57 // alert(newValue) 58 if (speed > 0 && newValue > target || speed < 0 && newValue < target) { 59 newValue = target 60 } 61 obj.style[attr] = newValue + "px" 62 if (newValue == target) { 63 clearInterval(obj.timer) 64 // 动画执行完毕，调用回调函数 65 // && 有则调用，没有则不调用 66 callback && callback() 67 } 68 }, 30) 69 } 70 71 let box1 = document.getElementById(‘box1‘) 72 let box2 = document.getElementById(‘box2‘) 73 let btn1 = document.getElementById(‘btn1‘) 74 let btn2 = document.getElementById(‘btn2‘) 75 let btn3 = document.getElementById(‘btn3‘) 76 let btn4 = document.getElementById(‘btn4‘) 77 btn1.onclick = function () { 78 move(box1, "left", 0, 10) 79 } 80 btn2.onclick = function () { 81 move(box1, "left", 800, 10) 82 } 83 btn3.onclick = function () { 84 move(box2, "width", 800, 10, function () { 85 move(box2, "height", 400, 10) 86 }) 87 } 88 btn4.onclick = function () { 89 move(box2, "width", 0, 10) 90 } 91 } 92 93 </script> 94 </head> 95 96 <body> 97 <div id="box1"></div> 98 <div id="box2"></div> 99 <div id="box3"></div> 100 <button id="btn1" style="position: absolute; top: 300px;">向左移动</button> 101 <button id="btn2" style="position: absolute; top: 350px;">向右移动</button> 102 <button id="btn3" style="position: absolute; top: 400px;">变大</button> 103 <button id="btn4" style="position: absolute; top: 450px;">变小</button> 104 </body> 105 106 </html>