JQ实现遮幕追随鼠标移动方向移入移出
作者：互联网
通过判定鼠标移入移出方向的最小值，用JQ实现遮幕追随鼠标移动方向移入移出的动画效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQ实现遮幕追随鼠标移动方向移入移出</title>
<style>
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
.affair {
overflow: hidden;
width: 1296px;
margin: 16px 0 80px -8px;
}
.affair li {
width: 308px;
height: 278px;
background: skyblue;
margin: 0 8px 16px;
float: left;
position: relative;
cursor: pointer;
overflow: hidden;
}
.affair-next {
position: absolute;
left: 0;
bottom: 0;
top: 278px;
width: 308px;
height: 278px;
background-color: rgba(0,0,0,.3);
}
</style>
</head>
<body>
<h1>JQ实现遮幕追随鼠标移动方向移入移出</h1>
<ul class="affair">
<li><div class="affair-next"></div></li>
<li><div class="affair-next"></div></li>
<li><div class="affair-next"></div></li>
<li><div class="affair-next"></div></li>
<li><div class="affair-next"></div></li>
<li><div class="affair-next"></div></li>
<li><div class="affair-next"></div></li>
<li><div class="affair-next"></div></li>
</ul>
</body>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
document.querySelectorAll(".affair li").forEach(function (li) {
const width = li.offsetWidth;
const height = li.offsetHeight;
li.onmouseenter = function (e) {
e = e || window.event;
// 2.1分别定义left, top, right, bottom为鼠标移入时与li的左，上，右，下边的距离
let left = e.pageX - this.offsetLeft;
let top = e.pageY - this.offsetTop;
let right = this.offsetLeft + width - e.pageX;
let bottom = this.offsetTop + height - e.pageY;
console.log(left, top, right, bottom);
// 2.2 取出鼠标移入时与li的左，上，右，下边的距离中的最小值
let min = Math.min(left, top, right, bottom);
console.log(min);
// 2.3判定最小值，对应的变量就是鼠标移入的方向
switch (min) {
// 2.3.1最小值为left的时候，说明鼠标从左边移入
case left:
$(this)
.find(".affair-next")
.css({ left: -width + "px", top: 0 })
.stop(!0)
.animate({ left: 0, top: 0 }, 300);
break;
case top:
$(this)
.find(".affair-next")
.css({ left: 0, top: -height + "px" })
.stop(!0)
.animate({ left: 0, top: 0 }, 300);
break;
case right:
$(this)
.find(".affair-next")
.css({ left: width + "px", top: 0 })
.stop(!0)
.animate({ left: 0, top: 0 }, 300);
break;
case bottom:
$(this)
.find(".affair-next")
.css({ left: 0, top: height + "px" })
.stop(!0)
.animate({ left: 0, top: 0 }, 300);
break;
}
};
li.onmouseleave = function (e) {
e = e || window.event;
let left = e.pageX - this.offsetLeft;
let top = e.pageY - this.offsetTop;
let right = this.offsetLeft + width - e.pageX;
let bottom = this.offsetTop + height - e.pageY;
let min = Math.min(left, top, right, bottom);
console.log(min);
console.log(this);
switch (min) {
case left:
$(this)
.find(".affair-next")
.css({ left: 0, top: 0 })
.stop(!0)
.animate({ left: -width + "px", top: 0 }, 300);
break;
case top:
$(this)
.find(".affair-next")
.css({ left: 0, top: 0 })
.stop(!0)
.animate({ left: 0, top: -height + "px" }, 300);
break;
case right:
$(this)
.find(".affair-next")
.css({ left: 0, top: 0 })
.stop(!0)
.animate({ left: width + "px", top: 0 }, 300);
break;
case bottom:
$(this)
.find(".affair-next")
.css({ left: 0, top: 0 })
.stop(!0)
.animate({ left: 0, top: height + "px" }, 300);
break;
}
};
});
});
</script>
</html>
标签：affair,移出,top,JQ,li,width,let,遮幕,left 来源： https://blog.csdn.net/longrh/article/details/120585252