【技术实现步骤摘要】
本专利技术涉及html、css开发，尤其涉及一种判断光标进入或离开html元素方向的方法。
技术介绍
1、在前端开发中，为了提升用户的交互体验，有时需要判断光标进入或离开html元素方向，一般有两种：1.使用纯css技术实现，在目标元素的四个方向“预置”四个隐藏的元素，光标从不同方向进入至少会触发其中的一个，这种方法需要判断最后触发的那个隐藏的元素，比较复杂且有局限性，仅能修改元素的样式；2.使用js原生方法，直接操作dom，计算出四个方向的坐标值，通过比较算法判断方向，这种方法计算繁琐，需要比较多种情况的值。
技术实现思路
1、本专利技术提供一种判断光标进入或离开html元素方向的方法，针对如何判断光标进入或离开html元素方向的问题，区别于纯css、通过距离定位方向的常用方法，本专利技术通过结合平面直角坐标系、圆角的反正切值、坐标映射等数学知识，通过坐标系中点的反正切值(该点扫过的区域)判断方向。
2、本专利技术通过以下技术方案来实现上述目的：
3、一种判断光标进入或离开html元素方向的方法，包括以下步骤：
4、步骤1，以目标元素的中心为轴心建立平面坐标系；
5、步骤2，以轴心为圆心，以目标元素高宽的较小值为直径作圆，从x轴0开始，以π/4为间隔将圆平均切分为8等分，因为反正切值的范围是[-π，π]，所以划分为[0，π/4]，[π/4，π/2]，[π/2，3π/4]，[3π/4，π]，[-π，-3π/4]，[-3π/4，-π/2
6、步骤3，将圆按角度分为四个区域，分别定义上、右、下、左：
7、上：定义[π/4，π/2]，[π/2，3π/4]的角度范围，值设定为0；
8、右：定义[-π/4，0]，[0，π/4]的角度范围，值设定为1；
9、下：定义[-3π/4，-π/2]，[-π/2，-π/4]的角度范围，值设定为2；
10、左：定义[3π/4，π]，[-π，-3π/4]的角度范围，值设定为3；
11、步骤4，监听目标元素的mouseenter、mouseleave事件，将光标进入元素时的点a映射到圆直径的区域中，连接圆心与该映射点，计算该线的反正切值，即可判断光标进入或离开的方向。
12、进一步方案为，所述步骤1中，创建html元素，以div标签为例，为div设置宽高，以div的中心为轴心建立平面坐标系。
13、进一步方案为，所述步骤4中，监听div的mouseenter、mouseleave事件，通过监听回调的event参数，可确定光标进入或离开div时的实时坐标为a(e.pagex,e.pagey)。
14、进一步方案为，所述步骤4中，将a点映射到圆半径的区域中，映射方法：计算出a点占据宽度(高度)一半的比例a，在圆半径区域的div上找到b点，使b点占据x(y)轴半径的比例也为a，b点的坐标为:
15、x＝(e.pagex-offsetleft-(w/2))*(w>h？(h/w):1)；
16、y＝(e.pagey-offsettop-(h/2))*(h>w？(w/h):1)。
17、进一步方案为，所述步骤4中，连接圆心与b点，计算b点在直角坐标系中的反正切值：θ＝math.atan2(y,x)；根据该点在坐标系中扫过圆形的区域，结合步骤3即可判断光标进入或离开div的方向。
18、本专利技术的有益效果在于：
19、本专利技术的一种判断光标进入或离开html元素方向的方法，通过结合平面直角坐标系、圆角的反正切值、坐标映射等手段，将光标进入元素时的点映射到坐标系中圆角度的区域中，通过坐标系中点的反正切值(该点扫过的区域)即可判断光标进入或离开的方向，确定了光标进入或离开html元素的方向，可实现更加多样性的功能。
本文档来自技高网...【技术保护点】
1.一种判断光标进入或离开HTML元素方向的方法，其特征在于，包括以下步骤：
2.如权利要求1所述的一种判断光标进入或离开HTML元素方向的方法，其特征在于，所述步骤1中，创建html元素，以div标签为例，为div设置宽高，以div的中心为轴心建立平面坐标系。
3.如权利要求1所述的一种判断光标进入或离开HTML元素方向的方法，其特征在于，所述步骤4中，监听div的mouseenter、mouseleave事件，通过监听回调的event参数，可确定光标进入或离开div时的实时坐标为A(e.pageX,e.pageY)。
4.如权利要求1所述的一种判断光标进入或离开HTML元素方向的方法，其特征在于，所述步骤4中，将A点映射到圆半径的区域中，映射方法：计算出A点占据宽度一半的比例a，在圆半径区域的div上找到B点，使B点占据x(y)轴半径的比例也为a，B点的坐标为:
5.如权利要求1所述的一种判断光标进入或离开HTML元素方向的方法，其特征在于，所述步骤4中，连接圆心与B点，计算B点在直角坐标系中的反正切值：θ＝Math.atan2
...【技术特征摘要】
1.一种判断光标进入或离开html元素方向的方法，其特征在于，包括以下步骤：
2.如权利要求1所述的一种判断光标进入或离开html元素方向的方法，其特征在于，所述步骤1中，创建html元素，以div标签为例，为div设置宽高，以div的中心为轴心建立平面坐标系。
3.如权利要求1所述的一种判断光标进入或离开html元素方向的方法，其特征在于，所述步骤4中，监听div的mouseenter、mouseleave事件，通过监听回调的event参数，可确定光标进入或离开div时的实时坐标为a(e.pagex,e.page...
【专利技术属性】
技术研发人员：庞磊，
申请(专利权)人：四川启睿克科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。