图示：
写法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>遮罩层随鼠标方向移动</title>
<script src="./jquery-3.2.1.min.js"></script>
<style>
.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden;}
.clearfix{display: block;}
.gird-container{width: 1200px;margin: 0 auto;position: relative;}
.grid-item{float: left;-webkit-box-sizing: border-box;box-sizing: border-box;width: 33.3333%;margin-bottom: 40px;padding: 0 20px;}
.gird-container .grid .picbox{position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;overflow: hidden;}
.gird-container .grid-item img{display: block;width: 100%;}
.gird-container .grid .mask{width: 100%;height: 100%;}
.gird-container .grid .mask {position: absolute;top: 100%;left: 0;background-color: rgba(0,0,0,.3);}
</style>
</head>
<body>
<div class="gird-container">
<ul class="grid clearfix" style="list-style: none;">
<li class="grid-item">
<a class="">
<div class="picbox">
<img src="https://www.ivinginmind.com/upload/202010/21/202010211335477842.jpg" />
<div class="mask"></div>
</div>
</a>
</li>
</ul>
</div>
<script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
<script>
$(function() {
var n = $(".grid");
$(".grid").on("mouseenter mouseleave", ".picbox", function(e) {
if (!(window.innerWidth < 992)) {
var i = $(this).find(".mask"),
t = getDir(e, $(this));
"mouseenter" === e.type ? enter(i, t) : out(i, t)
}
})
})
function getDir(e, t) {
var n = t.innerWidth(),
i = t.innerHeight(),
r = t.offset(),
o = (e.pageX - r.left - n / 2) * (i < n ? i / n : 1),
a = (e.pageY - r.top - i / 2) * (n < i ? n / i : 1);
return Math.round((Math.atan2(a, o) * (180 / Math.PI) + 180) / 90 + 3) % 4
};
function enter(e, t) {
switch (t) {
case 0:
e.css({
top: "-100%",
left: 0
}).stop(!0, !0).animate({
top: 0
}, 350);
break;
case 1:
e.css({
top: 0,
left: "100%"
}).stop(!0, !0).animate({
left: 0
}, 350);
break;
case 2:
e.css({
top: "100%",
left: 0
}).stop(!0, !0).animate({
top: 0
}, 350);
break;
case 3:
e.css({
top: 0,
left: "-100%"
}).stop(!0, !0).animate({
left: 0
}, 350)
}
};
function out(e, t) {
switch (t) {
case 0:
e.stop(!0, !0).animate({
top: "-100%"
}, 350);
break;
case 1:
e.stop(!0, !0).animate({
left: "100%"
}, 350);
break;
case 2:
e.stop(!0, !0).animate({
top: "100%"
}, 350);
break;
case 3:
e.stop(!0, !0).animate({
left: "-100%"
}, 350)
}
}
</script>
</body>
</html>写法二：https://blog.csdn.net/tangtang5963/article/details/47297713
写法三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery1.42.min.js"></script>
</head>
<style type="text/css">
.page_container{padding:50px 100px;width:460px;height:440px;margin:0 auto;}
.container{width:220px;height:210px;border:1px solid #ddd;background: #f7f7f7;float:left;position: relative;overflow: hidden;}
.mask{width:100%;height:100%;background:#000;position: absolute;display: none;opacity:0.5;}
</style>
<body>
<div class="page_container">
<div class="container">
<img src="2346.jpg" width="220" height="210" alt="" />
<div class="mask"></div>
</div>
<div class="container">
<img src="2346.jpg" width="220" height="210" alt="" />
<div class="mask"></div>
</div>
<div class="container">
<img src="2346.jpg" width="220" height="210" alt="" />
<div class="mask"></div>
</div>
<div class="container">
<img src="2346.jpg" width="220" height="210" alt="" />
<div class="mask"></div>
</div>
</div>
<script type="text/javascript">
$(".container").bind("mouseenter mouseleave",function(e) {
var w = $(this).width();
var h = $(this).height();
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
//alert(x);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
//direction的值为“0,1,2,3”分别对应着“上，右，下，左”
var eventType = e.type;
//alert(e.type);
if(e.type == 'mouseenter'){
if(direction==0){
$(this).find('.mask').css({'display':'block','top':-h+'px','left':'0px'}).animate({'top':'0px'});
}else if(direction==1){
$(this).find('.mask').css({'display':'block','left':w+'px','top':'0px'}).animate({'left':'0px'});
}else if(direction==2){
$(this).find('.mask').css({'display':'block','top':h+'px','left':'0px'}).animate({'top':'0px'});
}else if(direction==3){
$(this).find('.mask').css({'display':'block','left':-w+'px','top':'0px'}).animate({'left':'0px'});
}
}else{
if(direction==0){
$(this).find('.mask').animate({'top':-h+'px'});
}else if(direction==1){
$(this).find('.mask').animate({'left':w+'px'});
}else if(direction==2){
$(this).find('.mask').animate({'top':h+'px'});
}else if(direction==3){
$(this).find('.mask').animate({'left':-w+'px'});
}
}
});
</script>
</body>
</html>