js运动函数封装

运动函数封装

思路:

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

1. 先看看思路图:

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);
 }
    

你可能感兴趣的:(js运动函数封装)