下面贴代码：
CSS样式：
<style>
*{padding: 0;margin: 0;}
.box{margin: 50px 0 0 250px}
.box1{position: relative;float: left; width: 200px; height: 200px;overflow: hidden; background-color: blue;text-align: center;line-height: 200px;margin-right: 10px}
.dask{position: absolute;left: -200px;top: -200px;width: 200px;height: 200px;background-color: red;text-align: center;line-height: 200px;}
</style>HTML代码：
<div class="box"> <div class="box1"> <div class="dask">1</div> </div> <div class="box1"> <div class="dask">2</div> </div> <div class="box1"> <div class="dask">3</div> </div> <div class="box1"> <div class="dask">4</div> </div> </div>
JS代码：
$(".box1").on("mouseenter mouseleave",function(e) {
var w = $(this).width();
var h = $(this).height();
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);
var dirNum = Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4;
//效果
var eventType = e.type;
//移入 aPos[上，右，下，左]
var aPos=[{left:0,top:-200},{left:200,top:0},{left:0,top:200},{left:-200,top:0}];
if(eventType == 'mouseenter'){
$(this).find(".dask").css(aPos[dirNum]).stop(true,true).animate({left:0,top:0},200);
}else{
$(this).find(".dask").stop(true,true).animate(aPos[dirNum],200);
}
});
