JavaScript笔记(22)

mouseover和mouseenter的区别

• 当鼠标移动到元素上时就会触发mouseenter事件
• mouseover: 鼠标经过自身盒子会触发,经过子盒子还会触发(冒泡).
• mouseenter: 只有经过自身盒子才会触发(不会冒泡)
• mouseenter搭配鼠标离开mouseleave也不会冒泡

接下来学习新的知识:动画

动画

动画实现原理

核心原理: 通过定时器setInterval()不断移动盒子

实现步骤:

1. 获取盒子当前位置
2. 让盒子在当前位置加上n个移动像素
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素一定要添加定位,要用element.style.left/top来移动位置

我现在做一个试试看,让盒子向右移动,当盒子距离左侧大于600px的时候就停止:

但是我们的页面中可能会有很多地方都有动画,如果我们一个一个写那就会非常的麻烦,所以我们可以考虑将动画函数封装起来

动画函数简单封装

注意函数需要传递两个参数,动画对象和移动到的距离

我们这样封装一下就可以了.

但是我们每个对象的定时器都叫timer也不合适,所以我们就使用另一种方法,给不同的对象设置不同的定时器

这样就能很好的解决问题,是一个非常完美的写法,同时也能解决内存开辟的问题.

在之前做的时候就发现会有一个小bug:

我们现在让第二个盒子只有在点击按钮以后才会向右移动

但是如果我们多次点击按钮,就会发生这样的事情:

下面的盒子会越跑越快...这是因为我们每点一次按钮,就会新建一个定时器,所以会越来越快,那么该如何解决呢?

现在我们怎么点都不会影响效果了

到现在为止,我们的动画都只是匀速的,那么怎么才能够像CSS3一样变化运动的速度呢?

缓动效果

原理:缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢降下来

思路:

• 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来
• 核心算法: (目标值 - 现在的位置) / 10 作为每次移动的距离步长
• 停止的条件是:让当前盒子位置等于目标位置就停止定时器

虽然做出来了,但还是感觉有bug...

因为box.offsetLeft是不会超过600的,一直都是596...其实到不了终点,但后面应该会有解决的办法吧...

果然到了下一集老师就讲了这个问题!pink老师yyds!!!

解决方法:

既然永远也到不了终点,那我们就将步长取整,而且是向上取整,向下取整一样是到不了终点的

现在呢我们又加了一个向后的按钮,盒子向前移动后再返回来:

我们会发现又有问题,回来的时候看似是停止了,但其实并没有到返回到起点!

于是我将代码再修改一下:

这样就完美啦

动画函数添加回调函数

回调函数原理: 函数可以作为一个参数.将这个参数作为参数传入到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调.

回调函数的位置: 定时器结束的位置

为了方便使用,我们直接将函数封装在文件中

动画函数封装到单独的JS文件中

因为以后经常使用这个动画函数,可以单独封装到一个JS文件里面,使用的时候引用这个文件即可.

然后猝不及防的来了个案例,一个盒子在鼠标经过时滑动的案例:

先来看看结构:

样式:

JS:

今天结束,明天学习轮播图,洗漱洗漱上床休息了