如何做出跟着鼠标方向动的酷炫蒙层？

效果展示：飞入的图片，滑动的弹窗

看最后一个图片

*需求：根据鼠标进入方向，蒙层从相应的方向滑出，图片添加适当动画。

*解题思路：获取鼠标来自于什么方向，根据鼠标移入方向，添加蒙层效果。

*具体步骤：

1.获取鼠标的进入方向

var moveInWay=function($el,e){

var w=$el.outerWidth();

var h=$el.outerHeight();

var x=(e.pageX-$el.offset().left-(w/2))*(w>h?(h/w):1);

var y=(e.pageY-$el.offset().top-(h/2))*(h>w?(w/h):1);

return Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4;

};

至于为什么这样可以获取到鼠标进入的方向，请参考：鼠标移入判断原理；简单讲就是判断当前目标元素属于哪个区域，这里就不做详细讲解了。

2. 使用方法

$(".itemList").on("mouseenter mouseleave",function(e) {

var direction = moveInWay($el,e);

dir =["top","right","bottom","left"];

  if(e.type =="mouseenter"){

      $("div").text("鼠标从"+dir[direction]+"方进入");

  }else{

      $("#div").text("鼠标从"+dir[direction]+"方离开");

  }

});

3.具体demo

3.1 html片段：

html

3.2 css样式：

css

3.3 js部分

①获取鼠标进入方向

一

②定义动画开始位置（图片及蒙层）

二

③鼠标进入及离开动画处理

三

其实代码本身并不重要，重要的是思路，和实现的方式，希望对大家有帮助！！！

最后送上源码：

百度云盘链接：

http://pan.baidu.com/s/1kU4T5iR 

提取码：

wq67

---

                你也可以使用微信查看该文：

雨泽竹米