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/)) * ( w > h ? (h/w) :  );
    var y = (e.pageY - this.offsetTop  - (h/)) * ( h > w ? (w/h) :  );

    /** 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) * ( / Math.PI)) +  ) /  ) +  )  % ;

    /** do your animations here **/
    switch(direction) {
     case :
        $('.showD').css({
            'top':'-200px',
            'left':'',
            'opacity':'',
        }).stop().animate({
            'top':'',
            'left':'',
            'opacity':'',
        },)
      /** animations from the TOP **/
     break;
     case :
        $('.showD').css({
            'top':'',
            'left':'200px',
            'opacity':'',
        }).stop().animate({
            'top':'',
            'left':'',
            'opacity':'',
        },)
      /** animations from the RIGHT **/
     break;
     case :
        $('.showD').css({
            'top':'200px',
            'left':'',
            'opacity':'',
        }).stop().animate({
            'left':'',
            'top':'',
            'opacity':'',
        },)
      /** animations from the BOTTOM **/
     break;
     case :
        $('.showD').css({
            'top':'',
            'left':'-200px',
            'opacity':'',
        }).stop().animate({
            'left':'',
            'right':'',
            'opacity':'',
        },)
      /** 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/)) * ( w > h ? (h/w) :  );
    var y = (e.pageY - this.offsetTop  - (h/)) * ( h > w ? (w/h) :  );

    /** 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) * ( / Math.PI)) +  ) /  ) +  )  % ;

    /** do your animations here **/
    switch(direction) {
     case :
        $('.showD').css({
            'right':'',
        }).stop().animate({
            'right':'',
            'top':'-200px',
        },)
      /** animations from the TOP **/
     break;
     case :
        $('.showD').css({
            'top':'',
        }).stop().animate({
            'top':'',
            'left':'200px',
        },)
      /** animations from the RIGHT **/
     break;
     case :
        $('.showD').css({
            'top':'',
            'left':'',
        }).stop().animate({
            'left':'',
            'top':'200px',
        },)
      /** animations from the BOTTOM **/
     break;
     case :
        $('.showD').css({
            'top':'',
            'left':'',
        }).stop().animate({
            'left':'-200px',
            'right':'',
        },)
      /** 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:%;
    background-color:red;
    position:relative;
    overflow:hidden;
}
.showD{
    background: #469acb;
    position: absolute;
    width:%;
    height:200px;
}