动画函数，为任意一个元素移动到指定的目标位置

一、动画缓冲函数

/**  * 动画函数  * 任意一个元素移动到指定的目标位置  * @param {*} element 任意一个元素  * @param {*} target  目标位置（number类型）  */ function animate(element, target) {     // 先清理定时器     clearInterval(element.timeId);     element.timeId = setInterval(function () {         // 获取移动元素当前位置         var current = my$("dv").offsetLeft;         // 每次移动距离         var step = 9;         step = target > current ? step : -step;         // 移动后的距离         current +=step;         // 判断是否到达目标位置         if(Math.abs(target - current) > Math.abs(step)){             my$("dv").style.left = current + "px";         }else{             clearInterval(element.timeId);             my$("dv").style.left = target + "px";         }     }, 20); }

二、html代码

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         div {             width: 100px;             height: 100px;             position: absolute;             top: 50px;             left: 50px;             border: 1px solid pink;         }     </style> </head>  <body>      <input type="button" value="移动到400px" id="btn" />     <input type="button" value="移动到800px" id="btn2" />     <div id="dv"></div>      <script src="./js/common.js"></script> </body> </html>

三、第三方js文件---common.js

// 根据id获取元素对象 function my$(id){     return document.getElementById(id); }  /**  * 动画函数  * 任意一个元素移动到指定的目标位置  * @param {*} element 任意一个元素  * @param {*} target  目标位置（number类型）  */ function animate(element, target) {     // 先清理定时器     clearInterval(element.timeId);     element.timeId = setInterval(function () {         // 获取移动元素当前位置         var current = my$("dv").offsetLeft;         // 每次移动距离         var step = 9;         step = target > current ? step : -step;         // 移动后的距离         current +=step;         // 判断是否到达目标位置         if(Math.abs(target - current) > Math.abs(step)){             my$("dv").style.left = current + "px";         }else{             clearInterval(element.timeId);             my$("dv").style.left = target + "px";         }     }, 20); }

四、效果图

　　初始位置截图

　　初始位置---->400px处

　　400px处----->800px处

　　800px处----->400px处

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         div {             width: 100px;             height: 100px;             position: absolute;             top: 50px;             left: 50px;             border: 1px solid pink;         }     </style> </head>  <body>      <input type="button" value="移动到400px" id="btn" />     <input type="button" value="移动到800px" id="btn2" />     <div id="dv"></div>      <!-- 引入第三方js文件 -->     <script src="./js/common.js"></script>     <script>         my$("btn").onclick = function(){             animate(my$("dv"),400);         }          my$("btn2").onclick = function(){             animate(my$("dv"),800);         }     </script> </body> </html>

标签

target

动画

element