一个代码段（判断鼠标进入方向）

$("li").on("mouseenter mouseleave",function(e) {
           var w = this.offsetWidth;
           var h = this.offsetHeight;
           var toTop = this.getBoundingClientRect().top + document.body.scrollTop;  //兼容滚动条
           var x = (e.pageX - this.getBoundingClientRect().left - (w / 2)) * (w > h ? (h / w) : 1);   //获取当前鼠标的x轴位置
           var y = (e.pageY - toTop - h/2) * (h > w ? (w / h) : 1);
          //上面对长方形也做了兼容，也就是按照最小的那个边的一半作为半径了
          //例如有一个宽6，高是2的矩形 右上角的坐标就是{x:3,y:1}，经过上面的计算后{x:2/6 * 3,y:1}=》{x:1,y:1}   算出来也就是45°的样子
          //如果是正方形，可以去掉后面的系数（w>h && h>w）
           var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
           var eventType = e.type;
           var res = Math.atan2(y, x) / (Math.PI / 180) + 180 ;
           $('.line').css('transform','rotate('+ res +'deg)');

           // console.log(((Math.atan2(y, x) * 180 / Math.PI) + 180));
           // console.log(Math.round((Math.atan2(y, x) / (Math.PI / 180) + 180) / 90 + 3) % 4);
           var dirName = new Array('上方','右侧','下方','左侧');

               $('.res').text(res + 'deg');

           if(eventType == 'mouseenter'){
              $('.res').text(dirName[direction]+'进入');
              animationIn(direction);
          }else{
              $('.res').text(dirName[direction]+'离开');
              animationOut(direction);
          }
      });

转载自：http://www.jianshu.com/p/2a851db6475a