js判断鼠标进入容器的方向

转载 2016年05月30日 09:53:35

浏览网页的时候看到一个特效,遮罩层根据鼠标进入div的方向来显示,于是就对js判断鼠标进入div容器的方向这部分感兴趣,在网上找了一篇分析,总结在这里。

	   $(".S_service_div .on").hover(function(e){		 
	    var w = $(this).width();  
        var h = $(this).height();  
        var x=(e.pageX-this.offsetLeft-(w/2))*(w>h?(h/w):1);  
        var y=(e.pageY-this.offsetTop-(h/2))*(h>w?(w/h):1);  
        var dirNum=Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4;//direction的值为“0,1,2,3”分别对应着“上,右,下,左”</span>
		 if($(this).find(".show").length==0) {		 
		 if(dirNum==0){			 
			 $(this).find("dd").css({"top":"-100%","left":"0"});			 
		 }else if(dirNum==1){			 
			  $(this).find("dd").css({"top":"0","left":"100%"});			 
		 }else if(dirNum==2){			 
			  $(this).find("dd").css({"top":"100%","left":"0"});			 
		 }else if(dirNum==3){			 
			 $(this).find("dd").css({"top":"0","left":"-100%"});	
		 }		 
		 $(this).find("dd").animate({ "top": "0","left":"0"} ,300);		 
		 
		 }
		 });

下面是分析内容:

 $("#wrap").bind("mouseenter mouseleave",function(e) {
           var w = $(this).width();
           var h = $(this).height();
           var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
           var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
           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 dirName = new Array('上方','右侧','下方','左侧');
           if(e.type == 'mouseenter'){
              $("#result").html(dirName[direction]+'进入');
          }else{
              $('#result').html(dirName[direction]+'离开');
          }
      });

原理:以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限,鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下,右,上,左。如下图所示


var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
计算x坐标值时,如果点原来的x坐标的绝对值大于圆的半径值,则按 h/w 这个比例进行缩小,使得到的点的位置在容器的边界位置所对应的象限区间里。 y 坐标的计算也是一样。
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

((Math.atan2(y, x) * (180 / Math.PI)将点的坐标对应的弧度值换算成角度度数值,这里加上180并非必要,只是为了使得到的0,1,2,3能够与习惯性的上,右,下,左的位置对照,如果不加上180,得到的0,1,2,3就会分别对应下,右,上,左。
*修正:这里加上180不是并非必要的,而是在这个算法里必须的,因为atan2(y,x)返回值的范围是[-π,π],而不是我们习惯的[0,2π],负值会影响结果的正确性(比如右上和右下算出来的结果会不同),而且确实也使得得到的结果0,1,2,3的顺序符合了习惯(原作者可能没想这个,只是css里总是这个顺序,或许是我自己的习惯~)。


除以90,再取四舍五入值,是一个很精妙的用法,使得可以以45°为分界线。

相关文章推荐

js用斜率判断鼠标进入div的四个方向

网上大部分判断鼠标移入div移入移出都是使用一下方法:这个方法确实十分奇特,使用起来十分方便。后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向。上图是此方法的示意图,以浏览器左上角做...

判断鼠标进入容易的方向,js判断划入方向

判断鼠标进入容易的方向,js判断划入方向 $(function() { $("#box").on("mouseenter mouseleave",function(e) { var w = ...

判断鼠标方向js

如何判断鼠标进入元素的方向

本文为H5EDU机构官方的HTML5培训教程,主要介绍判断鼠标进入元素的方向 JavaScript强化教程 本文主要介绍当鼠标滑过一个元素,我们判断鼠标进入的方向, 第一步给给要监听的元素添加一...

Jquery确定鼠标进入div的方向

原文地址$(".overlayLink").bind("mouseenter mouseleave",function(e){/** the width and height of the curre...

仿拉勾网动画效果-----鼠标进入和离开元素4个方向对应的相关操作(非常炫酷)

仿照拉勾网做的一款动画效果,并且已经封装好了,直接就能拿来用

仿拉勾网动画效果-鼠标进入图片的方向滑动特效

html> html lang="en"> head> meta charset="UTF-8"> title>用jquery判断鼠标划入方向title> script src...

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

鼠标从左端划入,则遮盖层从左边划入遮盖div,而从上方划入,则遮盖层从上方划入遮盖div,同理对于右方和下方,而同样从哪个方向鼠标移出div,遮盖层也就从哪个方向消失,你能想象的出么?

判断鼠标移入移出元素时的方向

作者:流云诸葛 链接:http://www.cnblogs.com/lyzg/p/5689761.html 本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路。这个方法可以帮助你...

判断鼠标移入移出元素时的方向

转自:http://www.cnblogs.com/lyzg/p/5689761.html 支持原创 本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路。这个方法可以帮助你判断鼠标在...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)