js运动函数封装

运动函数封装

思路：

首先我们做想要做一个效果出来，得先分析这个效果需要涉及什么：

1. 先看看思路图：

2. 上图得知：我们想要运动，需要有什么变量：

• dom对象
• 初始值（我这里只对left进行操作，后期完善再修改）
• 步长
• 时间间隔
• 目标值

3. 代码展现

/*
*	autoRun():
*		ele：要运动的dom对象
*		start： 初始值
*		step：步长
*		everyTime: 时间间隔
*		target：目标值
*		（如果你想要定时器执行完一次后，）
*/
function autoRun(ele, step = 10, target, everyTime = 30) {
     /*这里传入的ele是一个对象，为对象添加了一个属性存储定时器ID。 
     因为这种方式底层是以内存地址引用的
     所以这里的属性会被全局保存下来*/
     let start = ele.offsetLeft;
     clearInterval(ele.timer);
     ele.timer = setInterval(() => {
         start += target > start ? step : -step;
         if (Math.abs(target - start) > Math.abs(step)) {
             ele.style.left = start + "px";
         } else {
             ele.style.left = target + "px";
         }
         clearInterval(ele.timer);
     }, everyTime);
 }