效果图：
代码：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin:0;padding:0;list-style: none}#box{position:relative;margin: 100px auto;width:300px;height:400px;background-image:url(img/timg1.jpg);background-size:300px 400px;border:1px solid black;overflow: hidden;}#zzc{position: absolute;width: 300px;height: 400px;background-color: red;opacity:0.4;left:-20000px;}</style></head><body style="height:1000px; width:1000px;"><div id="box"><div id="zzc"></div></div></body></html><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">function inDirection(evt) {//1、拿出鼠标距离四个边的距离//1)、盒子left，top，right，bottomlet left= $("#box").offset().left;let top = $("#box").offset().top;let right = left+$("#box").width();let bottom = top+$("#box").height();//2)、计算鼠标距离每个边的距离let leftDis =Math.abs(left-evt.pageX);let rightDis =Math.abs(right-evt.pageX);let topDis =Math.abs(top-evt.pageY);let bottomDis =Math.abs(bottom-evt.pageY);let obj = {"左":leftDis,"上":topDis,"右":rightDis,"下":bottomDis}let min = obj["左"];let minKey = "左";for(let key in obj){if(obj[key]<min){min = obj[key];minKey = key;}}return minKey;}function leftIn() {$("#zzc").css({"left":-300});$("#zzc").animate({"left":0,"top":0},200);}function rightIn() {$("#zzc").css({"left":300});$("#zzc").animate({"left":0,"top":0},200);}function upIn() {$("#zzc").css({"top":-400});$("#zzc").animate({"left":0,"top":0},200);}function bottomIn() {$("#zzc").css({"top":400});$("#zzc").animate({"left":0,"top":0},200);}function leftOut() {$("#zzc").animate({"left":-300,"top":0},200);}function rightOut() {$("#zzc").animate({"left":300,"top":0},200);}function upOut() {$("#zzc").animate({"left":0,"top":-400},200);}function bottomOut() {$("#zzc").animate({"left":0,"top":400},200);}let inFuncObj ={"左":leftIn,"上":upIn,"右":rightIn,"下":bottomIn};let outFuncObj ={"左":leftOut,"上":upOut,"右":rightOut,"下":bottomOut};$(function () {$("#box").mouseenter(function (evt) {let direction = inDirection(evt);console.log("从"+direction+"边进入");inFuncObj[direction]();});$("#box").mouseleave(function (evt) {let direction = inDirection(evt);console.log("从"+direction+"边出去");outFuncObj[direction]();});});</script>
