咱来谈谈前端中的数学，当然啦，顺便也来写点好玩的东西！

        咱们从一个小例子做引子，见微知著好吧！

        假如说现在有这样一道题，网页上有一个正方形div，大致的外观差不多是这样：

        然后呢，鼠标从左移进去的时候呢，打印一个"左"字，右边移入呢，打印一个"右"字，上边，下边移入呢，也是一样，那怎样判断鼠标在这个div的方位呢？

        咋看起来好像蛮简单的对吧？不就是获取鼠标位置，再鼠标的x小于这个div的左边距的时候是左，大于左边距+宽度的时候是右，小于上边距的时候是上，大于上边距+高度的时候是下，再用个鼠标移入去触发对吧？好像是这样，但是呢？其实你真这样去做你会发现走不通，为什么呢？鼠标的移入事件浏览器实际上是怎样判断的呢？无非是鼠标的位置在这个div之内的第一个落脚点，对吧，得之内，也就是说，之外的是行不通的。而且，假如说，我不是一个，而是5个，10个，甚至100个呢？再这样去想就稍微有点把自己给坑了对吧？

        那得怎样去判断呢？（先看下下面这张图）

        我的思路呢是按角度来，可以先想想，假如说以正方形的中心点为圆点画一个坐标轴的话，那我们这个上下左右的角度会是怎样？

就是上面这样对吧？有负的咱不好理解，全部加个180，变成这样：

然后你发现了吗？上下左右都间隔90°，是吧，咱再来除以90，然后就变成了：

然后呢？你发现2.5~3.5的四舍五入变成什么呢？ 3对吧？ 

好了，发现规律了，然后呢变成这样： 

上：3    左：4或者0    下：1    右：2

你说左有点问题啊，嗯是的，那如果把所有的值再来余4呢？看看，是不是很酷，变成了：

左：0    下：1    右：2    上：3

这样是不是方位就出来了？那具体代码得怎样实现呢？

先看看下面这个：

    
    
    
 html,body,div{margin:0;padding:0}
        .test{
            width:200px;
 height:200px;
 margin: 100px auto 0;
 box-shadow:0 0 5px #000;
 }
    
    

       上面的代码可以看到效果，而实际上写了那么多，最终最终有用的其实就红色框框这么一句：

        是不是很简单？但是呢？还有个问题？什么问题？如果元素不是正方形那可得怎么搞？不是90度了啊？你原来这个不得全部推翻吗？不不不，上面是我们完成下面的思维基石；

        那得怎么分析呢？先看看：

        看看上面：是不是从上侧移动时的鼠标坐标点的与原点的连线是不是更陡峭？上下都是比较陡峭的对吧？或者说他们的角度绝对值更大一些，是吧？左右呢？则是偏缓一些，或者说角度绝对值更小一些对吧？

        这样，它就促使我们这样去想：

        上，下：|y1/x1|   > 边角点的  |y0/x0|

        左，右：|y1/x1|   < 边角点的  |y0/x0|

        你说那上下怎么办呢？别急，上边移入的y1是不是大于0的？错，是小于0哈，再次强调一边，浏览器的y轴是从上到下，也就是说，当在上面区域，你鼠标的点的y值<中心点的y值，所以呢？得出了一个结论：（在上面的条件下）

        上：y1<0        下：y1>0        左：x1<0        右：x1>0

你说好像写成代码还挺难的样子，是吧？我贴几句话你看看哈，难不难你就心中有数了。

真正起作用的仅有中间的3行代码，难吗？

        既然有个比较通用的，比较靠谱的，对吧？那咱就来写一写代码，当然啦，总是弹出上啊，左啊右啊的，没意思，咱加点效果，好吧？

        当然了，下面这个代码呢，我就仅仅写了上边的哈，记住上边移入的时候会有完整效果，其他方向呢，也有，但是呢，没上边的好看，为什么要这样呢？因为你看了这么多对吧？总得自己练一练，不然是没有效果的，代码我就贴下边哈，自己尝试尝试，把左下跟右的效果补全。

        jQuery的请随便搜索个版本自行引入。

    
    
    
 html,body,div,ul,li{margin:0;padding:0;}
        li{list-style:none}
        .list{
            width:800px;
 height:440px;
 margin:100px auto 0;
 box-shadow:0 0 5px #000;
 }
        li{
            margin:10px;
 width:180px;
 height:200px;
 float:left;
 perspective:1000px;
 position:relative;
 }
        .liBox{
            width:100%;
 height:100%;
 position:absolute;
 transform-origin:50% 50% -100px;
 animation: 250ms ease-out 0ms 1 normal forwards;
 transform-style: preserve-3d;
 }
        .pic,.words{
            position:absolute;
 width:100%;
 height:100%;
 
 }
        .pic{background:skyblue}
        .words{background: #a9ebaa;visibility: hidden}

        
 .wordsTop{
            transform:rotateX(90deg) translate3d(0,-50%,100px);
 }

        
 .in-top{
            animation-name: in-top;
 animation-play-state: running;
 }
        .out-top{
            animation-name: out-top;
 animation-play-state: running;
 }

        
 .in-bottom{
            animation-name: in-bottom;
 animation-play-state: running;
 }
        .out-bottom{
            animation-name: out-bottom;
 animation-play-state: running;
 }

        
 .in-left{
            animation-name: in-left;
 animation-play-state: running;
 }
        .out-left{
            animation-name: out-left;
 animation-play-state: running;
 }

        
 .in-right{
            animation-name: in-right;
 animation-play-state: running;
 }
        .out-right{
            animation-name: out-right;
 animation-play-state: running;
 }

        
 @keyframes in-top {
            from{transform:rotate3d(0,0,0,0deg)}
            to{transform:rotate3d(-1,0,0,90deg)}
        }
        @keyframes out-top {
            from{transform: rotate3d(-1,0,0,90deg)}
            to{transform:rotate3d(0,0,0,0deg)}
        }
        
 @keyframes in-bottom {
            from{transform:rotate3d(0,0,0,0deg)}
            to{transform:rotate3d(1,0,0,90deg)}
        }
        @keyframes out-bottom {
            from{transform: rotate3d(1,0,0,90deg)}
            to{transform:rotate3d(0,0,0,0deg)}
        }
        
 @keyframes in-left {
            from{transform:rotate3d(0,0,0,0deg)}
            to{transform:rotate3d(0,1,0,90deg)}
        }
        @keyframes out-left {
            from{transform: rotate3d(0,1,0,90deg)}
            to{transform:rotate3d(0,0,0,0deg)}
        }
        
 @keyframes in-right {
            from{transform:rotate3d(0,0,0,0deg)}
            to{transform:rotate3d(0,-1,0,90deg)}
        }
        @keyframes out-right {
            from{transform: rotate3d(0,-1,0,90deg)}
            to{transform:rotate3d(0,0,0,0deg)}
        }

    
    
    



    

        

            
                
                
            
        
        

            
                
                
            
        
        

            
                
                
            
        
        

            
                
                
            
        
        

            
                
                
            
        
        

            
                
                
            
        
        

            
                
                
            
        
        

            
                
                
            
        
    

（原创首发于慕课网）