最终的动画函数封装（2）

 	<button>点击触发1</button><button>点击触发2</button><div></div>

<style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;background-color: red;position: relative;top: 100px;left: 0;}.div1{display: block;width: 50px;height: 50px;background-color: gold;margin-top: 200px;position: relative;top: 0;left: 0;}</style>

 <script>var box = document.querySelector('div');// var box1 = document.querySelector('.div1');// var span = document.querySelector('span');var btn1 = document.querySelector('button:nth-child(1)');var btn2 = document.querySelector('button:nth-child(2)');//给时间函数的变量设置为nullvar timeID = null;//进行点击事件：btn1.onclick = function(){//动画函数封装的调用animation(box,0,700,20,60);// animation(box1,0,700,20,60);}btn2.onclick = function(){//动画函数封装的调用animation(box,700,200,20,60);// animation(box1,0,700,20,60);}//定义一个节流阀,默认动画已经执行完，可以执行下一个动画效果了var flag = true;//形参有，属性，起始位置，终点位置，每次移动的距离，所需要的时间function animation(element,current,target,step,time){//添加一个判断条件，防止在一个事件中调用多次动画效果//为此同时所有在动画效果内的 flag前都添加上elementif(!element.flag){element.flag = true;}	if(element.flag){//修改flag为false,代表动画正在执行element.flag = false;//让当前的起始位置跟元素的位置相同current = element.offsetLeft; //判断事件函数是否是nullif(element.timeID != null){//删除时间clearInterval( element.timeID);element.timeID = null}element.timeID = setInterval(function(){//开始移动元素的位置if(current > target){//设置为负数step = -Math.abs(step);}//判断两点之间的距离 和每次移动的距离比较if(Math.abs(target - current) <= Math.abs(step)){//最后将最终位置赋值给起始位置current = target;// 同时删除时间函数clearInterval(element.timeID );//当动画被清楚时，使flag为true;element.flag = true;}else{// 每次移动的距离进行相加赋值current += step;}//将移动的距离赋值给目标element.style.left = current + 'px';},time);//添加事件函数的运行时间}//设置一个返回值，考试调用者动画是否结束return flag;}</script>

实现效果：

在这里插入图片描述

进行动画函数的封装：

//window.onload = function(){var timeID = null;var flag = true;//形参有，属性，起始位置，终点位置，每次移动的距离，所需要的时间function animation(element,current,target,step,time){if(flag){//修改flag为false,代表动画正在执行flag = false;//让当前的起始位置跟元素的位置相同current = element.offsetLeft; //判断事件函数是否是nullif(element.timeID != null){//删除时间clearInterval( element.timeID);element.timeID = null}element.timeID = setInterval(function(){//开始移动元素的位置if(current > target){//设置为负数step = -Math.abs(step);}//判断两点之间的距离 和每次移动的距离比较if(Math.abs(target - current) <= Math.abs(step)){//最后将最终位置赋值给起始位置current = target;// 同时删除时间函数clearInterval(element.timeID );//当动画被清楚时，使flag为true;flag = true;}else{// 每次移动的距离进行相加赋值current += step;}//将移动的距离赋值给目标element.style.left = current + 'px';},time);//添加事件函数的运行时间}//设置一个返回值，考试调用者动画是否结束return flag;}//};//调用方式为：
// btn1.onclick = function(){
//     //动画函数封装的调用
//     animation(box,0,700,20,60);
// }