<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { position: relative; width: 100px; height: 100px; background-color: red; } #box1 { margin-top: 10px; position: relative; width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <input type="button" id="btn" value="动画 800"> <input type="button" id="btn1" value="动画 400"> <div id="box"> </div> <div id="box1"> </div> <script> var btn = document.getElementById('btn'); var btn1 = document.getElementById('btn1'); var box = document.getElementById('box'); var box1 = document.getElementById('box1'); btn.onclick = function () { animate(box, 800); animate(box1, 800); // console.log(box.style.left); // console.log(box.offsetLeft); // box.style.left = box.offsetLeft + 10 + 'px'; // console.log(box.style.left); // console.log(box.offsetLeft); } btn1.onclick = function () { animate(box, 400); animate(box1, 400); // console.log(box.style.left); // console.log(box.offsetLeft); // box.style.left = box.offsetLeft - 10 + 'px'; // console.log(box.style.left); // console.log(box.offsetLeft); } // var timerId = null; // 封装动画的函数 function animate(element, target) { // 通过判断，保证页面上只有一个定时器在执行动画 if (element.timerId) { clearInterval(element.timerId); timerId = null; } element.timerId = setInterval(function () { // 步进 每次移动的距离 var step = 10; // 盒子当前的位置 var current = element.offsetLeft; // 当从400 到 800 执行动画 // 当从800 到 400 不执行动画 // 判断如果当前位置 > 目标位置 此时的step 要小于0 if (current > target) { step = - Math.abs(step); } // Math.abs(current - target) < Math.abs(step) if (Math.abs(current - target) < Math.abs(step)) { // 让定时器停止 clearInterval(element.timerId); // 让盒子到target的位置 element.style.left = target + 'px'; return; } // 移动盒子 current += step; element.style.left = current + 'px'; }, 30); } </script> </body> </html>