JavaScript特效！scroll与缓动动画

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

1.基础

• 原理：盒子未来位置=当前位置+步长，步长会越来越小。设置点击事件，事件函数为定时器。

 div.style.left = div.offsetLeft + (400 - div.offsetLeft) / 10 + "px";

• 封装函数：与[匀速动画构造类似，但是步长原理不同，匀速的是固定的，而缓动会随当前值发生变化；

function animate(ele, target) {
   
		//1.清除定时器并设置定时器函数
		 clearInterval(ele.timer);
        ele.timer = setInterval(function () {
   
        //2.处理步长
            var step = (target - ele.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
		//3.if函数判断当前位置
            if (Math.abs(target - ele.offsetLeft) <= Math.abs(step