正文
js根据鼠标方向划入遮罩层
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js根据鼠标方向划入遮罩层:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
ul{
overflow:hidden;
}
.game-list{
float: left;
width:296px;
height:240px;
border: 1px solid #cdcdcd;
box-shadow: 0 10px 10px #e7e7e7;
margin-left: 93px;
margin-top:20px;
position: relative;
overflow: hidden;
}
.slidiv{
position: absolute;
height:240px;
width:296px;
background: rgba(9,9,9,0.5);
position: absolute;
left:-296px;
top:0;
text-align: center;
color: #FFFFFF;
}
a{
width:296px;
height:240px;
display: block; }
</style>
<body>
<div>
<ul>
<li class="game-list">
<a href="#">3131</a>
<div class="slidiv">
<p>1</p>
</div>
</li>
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
slidiv()
function slidiv(){
$(".game-list").bind("mouseenter mouseleave", function(e) {
var w = $(this).width();
var h = $(this).height();
//计算鼠标指针x,y位于当前元素比例的坐标位置
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);
//得出四个方向的值（0，1，2，3）
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; this_slidiv = $(this).find('.slidiv');
if(e.type == 'mouseenter'){
switch(direction){
case 0 :
this_slidiv.css({top:-h,left:"0px"});
break;
case 1:
this_slidiv.css({top:"0px",left:w});
break;
case 2:
this_slidiv.css({top:h,left:"0px"});
break;
case 3:
this_slidiv.css({top:"0px",left:-w});
break;
} this_slidiv.stop(true,true).animate({"top":"0px","left":"0px"},"fast"); }else if(e.type == 'mouseleave'){
switch(direction){
case 0 :
this_slidiv.stop(true,true).animate({"top":-h},"fast");
break;
case 1:
this_slidiv.stop(true,true).animate({"left":w},"fast");
break;
case 2:
this_slidiv.stop(true,true).animate({"top":h},"fast");
break;
case 3:
this_slidiv.stop(true,true).animate({"left":-w},"fast");
break;
}
}
});
}
</script>
</html>
