参考资料：
贤心博客：http://sentsin.com/web/112.html,
Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsref_atan2.asp;
Demo: Demo
截图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<style>
*{ margin:0;padding:0;}
#box{ position: absolute;top:200px;left:200px; 560px;height:560px;border:1px solid #999;padding:10px 0 0 10px; }
#box div{ position: relative; float:left;100px;height: 100px; margin:0 10px 10px 0;border:1px solid #ccc;overflow: hidden;}
#box div.big-box{ 324px;}
#box .mark{ position: absolute;left:-200px;top:-200px;100%;height:100%;background-color: #000; opacity: 0.5; border:none; }
</style>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
var $oBox = $('#box');
var $aDivs = $oBox.children();
var $aMarks = $('.mark');
$aMarks.on('mouseenter',function(event){
event.stopPropagation();
return false;
});
$aDivs.on('mouseenter mouseleave',function( event ){
var $this = $(this),
$mark = $this.find('.mark'),
w = $this.width(),
h = $this.height(),
offset = $this.offset(),
scaleX = w > h ? (h / w) : 1,
scaleY = h > w ? (w / h) : 1,
x = (event.pageX - offset.left - (w / 2)) * scaleX,
y = (event.pageY - offset.top - (h / 2)) * scaleY,
direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
type = event.type;
if( direction == 0 ){
if( type == "mouseenter" ){
$mark.css({
'top' : -h,
'left' : 0
});
$mark.animate({
'top' : 0
},300);
}else{
$mark.animate({
'top' : -h
},300);
}
}else if( direction == 1 ){
if( type == "mouseenter" ){
$mark.css({
'top' : 0,
'left' : w
});
$mark.animate({
'left' : 0
},300);
}else{
$mark.animate({
'left' : w
},300);
}
}else if( direction == 2 ){
if( type == "mouseenter" ){
$mark.css({
'top' : h,
'left' : 0
});
$mark.animate({
'top' : 0
},300);
}else{
$mark.animate({
'top' : h
},300);
}
}else if( direction == 3 ){
if( type == "mouseenter" ){
$mark.css({
'top' : 0,
'left' : -w
});
$mark.animate({
'left' : 0
},300);
}else{
$mark.animate({
'left' : -w
},300);
}
}else{
$mark.css({
'top' : 0,
'left' : 0
});
}
});
});
</script>
</head>
<body>
<div id="box">
<div >
<a href="#" class="mark"></a>
</div>
<div class="big-box">
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div>
<a href="#" class="mark"></a>
</div>
<div class="big-box">
<a href="#" class="mark"></a>
</div>
</div>
</body>
</html>
后记:
其实核心的代码都是用贤心博客里的代码，讲解的也比较清楚。
1.要知道父级容器有正方形和长方形所以要算一个比例关系，求出x，y的值;
2.Math.atan2(y, x) 返回从 x 轴到点 (x,y) 之间的角度 其实返回的是弧度然后在* 180 / Math.PI 转成角度;
3.至于+ 180) / 90) + 3) % 4 +180 是为了角度的反转，除90是平均分成四份 +3其实为了%4求出0,1,2,3;
大概的逻辑是这样，可以也有个人理解不对的方法，欢迎指出;