判断鼠标从div的哪一方向划入



发现一种很有意思的效果，感觉很漂亮很华丽，想实现一下，大体效果来介绍下：

鼠标从左端划入，则遮盖层从左边划入遮盖div，而从上方划入，则遮盖层从上方划入遮盖div，同理对于右方和下方，而同样从哪个方向鼠标移出div，遮盖层也就从哪个方向消失，你能想象的出么？如果还想象不出效果，可以看一下“拉勾网”，我就从上面发现的这个效果。

其实单纯说遮盖层划出的效果，我们大约知道好几种方法，如果遮盖层是需要新创建div，那么javascript完全可以实现，至于划出效果也可以实现，遮盖层的width从0不断增大到div的宽度即可，而如果遮盖层是之前隐藏的div，那么除了用javascript方法，我们还可以用css3的transition的width来实现效果，然后我们就遇到了一个当前的大问题，那就是判定鼠标从哪个方向划入，然后遮盖层从哪个方向划出。

而我想到的方法，就是鼠标划入的初始位置，距离div的哪一个边最近，我们就知道从哪一个方向划入的了，是不是这个道理呢，用代码来实现下：

html语言：

1. <div style="margin-left:300px;margin-top:300px;width:400px;height:400px;background:cyan;" id="test">  
2.         <img src="11.jpg" width="300px" height="250px">  
3. </div>  

<span style="font-size:18px;"><div style="margin-left:300px;margin-top:300px;width:400px;height:400px;background:cyan;" id="test"><img src="11.jpg" width="300px" height="250px"></div></span>

js部分：

1. window.onload=function(){  
2.                 var left=0;  
3.                 var top=0;  
4.         var right=0;  
5.         var bottom=0;  
6.                 var arr=new Array();  
7.                 test.addEventListener("mouseover",function(event){  
8.             var test=document.getElementById("test");//获得test对象  
9.             if(check){  
10.                 check=false;  
11.                 var x=event.clientX;//鼠标的位置  
12.                 var y=event.clientY;  
13.                 left=x-test.offsetLeft;//鼠标相对于div左方的边的距离  
14.                 top=y-test.offsetTop;//相对于div上方的边的距离  
15.                 right=test.offsetLeft+test.offsetWidth-x;//相对于div右方的边的距离  
16.                 bottom=test.offsetTop+test.offsetHeight-y;//相对于div下方的边的距离  
17.                 arr.push(top);  
18.                 arr.push(right);  
19.                 arr.push(bottom);  
20.                 arr.push(left);  
21.                 var least=findLeast(arr);  
22.                 alert(least);//获取最小是数组的第几位，1、2、3、4位分别是左、上、右、下，就能判定是哪个方向了  
23. }  
24.     var findLeast=function([a1,a2,a3,a4]){  
25.             var a;  
26.             var n;  
27.             a=a1>a2?a2:a1;  
28.             n=a==a2?2:1;  
29.             a=a3>a?a:a3;  
30.             n=a==a3?3:n;  
31.             a=a4>a?a:a4;  
32.             n=a==a4?4:n;  
33.             return n;  
34.         }  
35. }  

<span style="font-size:18px;">window.onload=function(){                var left=0;                var top=0;var right=0;var bottom=0;                var arr=new Array();                test.addEventListener("mouseover",function(event){var test=document.getElementById("test");//获得test对象if(check){check=false;var x=event.clientX;//鼠标的位置var y=event.clientY;left=x-test.offsetLeft;//鼠标相对于div左方的边的距离top=y-test.offsetTop;//相对于div上方的边的距离right=test.offsetLeft+test.offsetWidth-x;//相对于div右方的边的距离bottom=test.offsetTop+test.offsetHeight-y;//相对于div下方的边的距离arr.push(top);arr.push(right);arr.push(bottom);arr.push(left);var least=findLeast(arr);alert(least);//获取最小是数组的第几位，1、2、3、4位分别是左、上、右、下，就能判定是哪个方向了}var findLeast=function([a1,a2,a3,a4]){var a;var n;a=a1>a2?a2:a1;n=a==a2?2:1;a=a3>a?a:a3;n=a==a3?3:n;a=a4>a?a:a4;n=a==a4?4:n;return n;}}</span>

这样是不是就达到目的了呢，再来想想该怎么继续实现这个效果呢，多写几个if应该可以把，今天先到这里吧，明天试试看