这可能是比较常用的一个效果了。
效果预览：https://codepen.io/andy-js/pen/RwNjppZ
直接看代码：主要看注释
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>andy-js:根据鼠标方向移入移出</title>
<style>
*{margin:0; padding:0;}
#box{ width:200px; height:200px; position:relative; top:0; left:0; margin:100px auto; background:#ccc; overflow: hidden;}
#box span{width:100%; height:100%; position:absolute; top:0; left:-200px; background:rgba(255,0,0,1);}
</style>
</head>
<body>.
<div id="box"><span></span></div>
<script>
var oBox=document.getElementById('box');
var oS = oBox.children[0];
oBox.onmouseover=function(ev){
var oEvent = ev||event;
var oForm = oEvent.formElement||oEvent.relatedTarget;
if(this.contains(oForm))return; //判断如果当前触发事件的元素不是box本身则忽略
var dir = direction(this,oEvent);
oS.style.transition='0s all ease';
switch(dir){
case 2:
//右
oS.style.left = '200px';
oS.style.top = 0;
break;
case 1:
//下
oS.style.left = 0;
oS.style.top = '200px';
break;
case 0:
//左
oS.style.left = '-200px';
oS.style.top = 0;
break;
case 3:
//上
oS.style.left = 0;
oS.style.top = '-200px';
break;
}
getTo({top:0,left:0});
};
oBox.onmouseout=function(ev){
var oEvent = ev||event;
var oTo = oEvent.toElement||oEvent.relatedTarget;
if(this.contains(oTo))return;
var dir = direction(this,oEvent);
switch(dir){
case 2:
//右
getTo({left:200,top:0});
break;
case 1:
//下
getTo({left:0,top:200});
break;
case 0:
//左
getTo({left:-200,top:0});
break;
case 3:
//上
getTo({left:0,top:-200});
break;
}
};
function a2d(n){
return n*180/Math.PI;
};
function direction(obj,ev){
var w = obj.offsetWidth;
var h = obj.offsetHeight;
var x = ev.clientX-(obj.offsetLeft+w/2);
var y = (obj.offsetTop+h/2)-ev.clientY;
return Math.round((a2d(Math.atan2(y,x))+180)/90)%4;
/*
Math.atan2
atan2() 方法可返回从 x 轴到点 (x,y) 之间的角度。弧度
语法 Math.atan2(y,x)
弧度*180/Math.PI = 角度
角度*Math.PI/180 = 弧度
Math.atan2(y,x) 得到0-180 0-负180
所以先加上180得到正的
Math.atan2(y,x) +180
之前是 -180-180之间的值 都加上180以后
能得到 0-360 之间的值
每个值之间相隔90 所 用值/90 可能除不尽所以四舍五入 再最后%4 因为分成4份
*/
};
var timer;
function getTo(o){
clearTimeout(timer);
timer=setTimeout(function(){
oS.style.transition='0.4s all ease';
oS.style.left=o.left+'px';
oS.style.top=o.top+'px';
},100);
/*
因为这里动画偷懒没有引入其它的动画库，所以为了避免一些问题，用了setTimeout
*/
};
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。