判断鼠标从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.οnlοad=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.οnlοad=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应该可以把,今天先到这里吧,明天试试看



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值