案例分析
本案例目的实现以下三种效果:
- 鼠标经过某个小 li , 筋斗云跟这到当前小 li 位置;
- 鼠标离开这个小 li ,筋斗云复原为原来的位置;
- 鼠标点击了某个小 li ,筋斗云就会留在点击的这个小 li 的位置
因此
① 可以采用动画函数进行制作这个效果
② 先设定筋斗云起始的位置为 0
③ 鼠标经过某个小 li ,就把当前的小 li 的 offsetLeft 位置作为目标值
④ 鼠标离开这个小 li ,就把目标值设为0
⑤ 如果点击了某个小 li ,就把当前的位置存起来,作为筋斗云的起始位置<