JS判断鼠标从哪个方向进入DIV容器

   写的不够高大上 ， 不要介意哦。。。

Js:

    
//进去
$(".flash").bind("mouseenter",function(e){

    /** the width and height of the current div **/
    var w = $(this).width();
    var h = $(this).height();

    /** calculate the x and y to get an angle to the center of the div from that x and y. **/
    /** gets the x value relative to the center of the DIV and "normalize" it **/
    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 );

    /** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
    /** first calculate the angle of the point, 
     add 180 deg to get rid of the negative values
     divide by 90 to get the quadrant
     add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;


    /** do your animations here **/ 
    switch(direction) {
     case 0:
        $('.showD').css({
            'top':'-200px',
            'left':'0',
            'opacity':'0',
        }).stop().animate({
            'top':'0',
            'left':'0',
            'opacity':'1',
        },300)
      /** animations from the TOP **/
     break;
     case 1:
        $('.showD').css({
            'top':'0',
            'left':'200px',
            'opacity':'0',
        }).stop().animate({
            'top':'0',
            'left':'0',
            'opacity':'1',
        },300)
      /** animations from the RIGHT **/
     break;
     case 2:
        $('.showD').css({
            'top':'200px',
            'left':'0',
            'opacity':'0',
        }).stop().animate({
            'left':'0',
            'top':'0',
            'opacity':'1',
        },300)
      /** animations from the BOTTOM **/
     break;
     case 3:
        $('.showD').css({
            'top':'0',
            'left':'-200px',
            'opacity':'0',
        }).stop().animate({
            'left':'0',
            'right':'0',
            'opacity':'1',
        },300)
      /** animations from the LEFT **/
     break;
     
}});

//出来    
$(".flash").bind("mouseleave",function(e){

    /** the width and height of the current div **/
    var w = $(this).width();
    var h = $(this).height();

    /** calculate the x and y to get an angle to the center of the div from that x and y. **/
    /** gets the x value relative to the center of the DIV and "normalize" it **/
    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 );

    /** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
    /** first calculate the angle of the point, 
     add 180 deg to get rid of the negative values
     divide by 90 to get the quadrant
     add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;


    /** do your animations here **/ 
    switch(direction) {
     case 0:
        $('.showD').css({
            'right':'0',
        }).stop().animate({
            'right':'0',
            'top':'-200px',
        },300)
      /** animations from the TOP **/
     break;
     case 1:
        $('.showD').css({
            'top':'0',
        }).stop().animate({
            'top':'0',
            'left':'200px',
        },300)
      /** animations from the RIGHT **/
     break;
     case 2:
        $('.showD').css({
            'top':'0',
            'left':'0',
        }).stop().animate({
            'left':'0',
            'top':'200px',
        },300)
      /** animations from the BOTTOM **/
     break;
     case 3:
        $('.showD').css({
            'top':'0',
            'left':'0',
        }).stop().animate({
            'left':'-200px',
            'right':'0',
        },300)
      /** animations from the LEFT **/
     break;
     
}});

HTML:

        <div class="flash">
             <img class="pic_bg" src="http://img0.imgtn.bdimg.com/it/u=261025820,3584077840&fm=21&gp=0.jpg" style="width:100%;height:100%"/>
             <div class="showD">
             </div>
        </div>

Css:

.flash{
    width:200px;
    height:200px;
    margin-left:30%;
    background-color:red;
    position:relative;
    overflow:hidden;
}
.showD{
    background: #469acb;
    position: absolute;
    width:100%;
    height:200px;
}