筋斗云的变速运动

撰写时间：2021/07/28

1、先康康效果：当鼠标移上选项时，‘筋斗云’会以变速的方式移动到在鼠标指针停留的位置，又          当鼠标点击了某一选项时，‘筋斗云’则会停留在点击的位置上。

 2、html与css的源码具体如下：

3、接下来是主要的JavaScript部分：

  （1）先写一个变速动画的函数animate()

  （2）①在定时器内写一下内容；

  （3）获取div的当前位置

       ③计算出div每次移动的距离（像素），然后写一个三目运算，

       当计算结果—step>0时，step向上取整（Math.cile(step)），

       反之向下取整（Math.floor(step)）

  （4）④就是当前的位置 +=‘筋斗云’移动的距离

  （5）⑤和②的作用是为了，在这个小案例中，只产生一个定时器

  （6）⑥在控制台中，查看‘筋斗云’移动的详细信息

  （7）⑦先获取到所有的li标签，⑧获取‘筋斗云’

  （8）⑨写一个方法函数： 调用在（1）写的一个函数，有两个参数，一个是‘筋斗云’，另一个是              当前鼠标的位置

  （9）⑩创建一个变量，记录上次点击的位置

  （10）⑪当鼠标离开时，‘筋斗云’回到上次点击的位置上

  （11）在一个for循环里面，遍历每一个li标签，将写到的三个函数，

            在⑫中写一个鼠标移入事件，然后调用函数⑨；

            在⑬中写一个鼠标点击事件，然后调用函数⑩；

             在⑭中写一个鼠标输出事件，然后调用函数⑪；

好了，今天就分享这些！！！