jQuery炫酷特效之遮罩移动效果

今天带领大家实现一个非常炫酷的遮罩效果。遮罩跟随鼠标的移入点移入区块中（鼠标从区块左侧移入则遮罩也从左侧移入，鼠标从左侧移出遮罩也会左侧移出，其它方向同理），可以将这样一个效果应用到自己到网页中：

炫酷遮罩层

一、准备工作

先想一想这样到一个效果该如何实现呢？HTML结构该怎么搭建？

......

来看看基本到HTML结构是如何到：

HTML结构

CSS：

CSS

我将a中的overflow:hidden注释来，来看看初始到遮罩层中什么位置吧。看完记得将注释去掉哦。

遮罩初始位置

其实结构也是很简单的。这里有个难点就是如何判断鼠标的移入移出方向？

二、获取鼠标移入方向

jQuery并未给出这样的方法，需要自己实现。先放代码，再解释：

Math.atan2(y,x) 返回-PI 到 PI 之间的值(负180°到正180°)，是从 X 轴正向逆时针旋转到点 (x,y) 时经过的角度 这里的结果是一个弧度值。那如何把这个值转换为角度呢？我们可以先算出一个角度的弧度值(180 / Math.PI) ，然后用上面计算出来的结果乘以一度的弧度值。（实在不明白自行度娘吧）

三、鼠标移入移出效果

有了上面到基础，那再去实现效果就简单多了。

还有一点需要注意：如果鼠标是从下面移入，先将遮罩放在区块到下面；从右侧移入，先把遮罩放在区块到右侧；从上面移入，先把遮罩放在区块到上面；从左侧移入，先把遮罩放再区块到左侧。然后再运动到left:0;top:0;（css使用到了定位）。移出正好跟移入相反。

鼠标移入

鼠标移出

四、jQuery知识点补充

通过这个例子，引申出一个疑问，鼠标移入移出为什么不使用mouseover和mouseout呢？来看看jQuery中mouseover、mouseout和mouseenter、mouseleave到区别：

• mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

• mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

如果您觉得本文的教程对您有所帮助，请点击【关注】支持哦，您的关注是对我最大的鼓励。