JavaScript：PC端特效-从mouseenter和mouseover的区别到动画函数

一、mouseenter和mouseover的区别

mouseenter鼠标事件：

当鼠标移动到元素上时就会触发mouseenter事件，这个看起来和mouseover事件很像

那它们的区别是什么呢？

mouseenter只会经过自身盒子才触发，而mouseover经过自身盒子以及子盒子都会触发

大家就要问了，主播主播，这是为什么呢？

因为mouseover会有一个冒泡的过程，鼠标经过父盒子时执行一次，经过子盒子时，把事件又放到子盒子上，经历冒泡后，又会触发绑定在父盒子身上的事件，而mouseenter没有这个过程，所有才会产生上面所说的区别

那跟mouseenter搭配使用mouseleave，mouseleave也同样不会冒泡

二、动画函数封装

1.动画实现原理

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

实现步骤：

1. 获得盒子当前的位置
2. 让盒子在当前位置上加1个移动距离
3. 利用定时器不断重复这个动作
4. 加一个结束定时器的条件
5. 注意此元素要添加定位，才能使用element.style.left

 我们来做一个简单的动画练练手

先设置好一个div盒子以及它的css

<div>再见了妈妈，我今晚就要远航~</div>

div {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: pink;
}

要记得加上定位，否则它就动不起来

接下来我们来做动画

先把要用的参数定义好，然后再让盒子的位置在当前基础上加1

var div = document.querySelector('div');
var timer = setInterval(function () {
    div.style.left = div.offsetLeft + 1 + 'px';
}, 30)

 主播主播，它真的动起来了，不过它咋跑掉了，它真的要去远航了吗

不要急，我们还没有加上终止条件

if (div.offsetLeft >= 400) {
    clearInterval(timer);
}

在定时器里面加上终止条件，要让它停下来本质上就是清除掉定时器

2.简单动画函数封装

主播主播，页面里这么多要用动画的地方，除了每个都写一次动画，有没有更强势的写法

有的，孩子们有的，我们可以把动画封装成一个函数

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

function annimate(obj，target）{
    var obj = document.querySelector('div');
    var timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
   }, 30)
}//obj目标对象，target目标位置

 这样一个简单的动画函数就做好啦，接下来谁需要动画效果调用就行

var div = document.querySelector('div');
animate(div,300);

3.动画函数给不同元素记录不同定时器

我们已经封装了一个简单的动画函数，不过存在一个问题，每次调用函数时都得开辟一个内存空间来储存var那个参数，而且计时器也用的同一个，这样调用次数多了容易出现问题

我们可以给每个不同的对象指定它定制的定时器

function annimate(obj，target）{
    var obj = document.querySelector('div');
    obj.timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
   }, 30)
}

我们来试一下能不能成功调用

var div = document.querySelector('div');
animate(div,300);

我们还可以来试一下点击按钮后来调用动画函数

 css：

div {
    position: absolute;
    left: 0;
    top: 40px;
    width: 200px;
    height: 200px;
    background-color: pink;
}

 HTML：

<div>再见了妈妈，我今晚就要远航~</div>
<button>点我</button>

JavaScript：

function annimate(obj, target) {
    var obj = document.querySelector('div');
    obj.timer = setInterval(function () {
         if (obj.offsetLeft >= target) {
              clearInterval(timer);
         }
         obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 30)
}
var div = document.querySelector('div');
var button = document.querySelector('button');
button.addEventListener('click', function () {
    annimate(div, 1300);
})

点击按钮后，我们的div盒子继续去“远航”啦