Determine the orientation of the mouse when moving out of an element

This article introduces a way to get the mouse moving direction when the mouse moves from one element to the other. This method can help you determine which direction the mouse is moving in and out from the top to the bottom. This idea, I figured out, using a bit of the math I had learned in high school, but very simple and good understanding, I hope to be helpful to you.

Online Demo:

Http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html

Related code :

Https://github.com/liuyunzhuge/blog/blob/master/mouse_direction/demo1.js

There is also some logic code in the demo1.html.

Effect Demo:

Detailed ideas

1. Divide the element frame into the following four sections:

The problem can be solved as long as it is possible to determine which part of the mouse is moved in and out of the range. This judgment can be calculated by the slope, the position of the mouse and the center point of the element frame comparison. This principle of judgment is illustrated by the following coordinate system diagram.

2. To solve this problem, establish a coordinate system such as:

1) Establish a coordinate system in the upper left corner of the viewable area of the browser, the coordinate system and the mathematical coordinate system direction, the right side of the x-axis positive direction, downward indicates the y-axis negative direction;

2) The midpoint of the figure (X1,Y1) represents the upper-left corner of the element box, (X4,Y4) represents the lower-right corner of the element box, (X0,Y0) represents the center point of the Element box, (x, y) represents the intersection of the edge of the element frame when the mouse is moved out;

3) According to the following formula:

Available (x1,y1) and (X4,Y4) the slope of this diagonal is k = (y1-y4)/(X1-X4). The slope of the other diagonal of the element box must be-k because of symmetry.

At the same time, because the diagonal (x1,y1) and (X4,Y4) must pass through the second and fourth quadrants in the coordinate system, K must be negative, and-K must be positive.

4) According to the same formula, when the mouse moves out of the moment, with the element border of the intersection with the element frame center point slope k1 = (y-y0)/(x-x0).

5) by the figure, when K < K1 <–k, the mouse must be moved from the left and right direction of the element, on the contrary, must be moved from the upper and lower direction.

When the mouse is moving from the left and right direction, if x > x0, then the mouse is moving from the right, and vice versa is moving from the left;

When the mouse is moving up and down, if y > y0, then the mouse is moving from the top, and vice versa is moving from the bottom.

Note: All y values in the coordinate system are negative.

The above is the problem, I provide the solution, through the above illustrated, I believe that you will understand easier. If you look at the code implementation Demo1.js I provide, I find the logic of the code consistent with the above illustrated illustration. Of course, this idea is only to solve how to determine the direction of the mouse move out of the problem, the effect of the demo in the end also need to use CSS transition, but this part is more simple, detailed code visible demo1.html source, logic is very simple, here is no longer detailed description.

Other ideas

Before I get to the idea above, I've actually learned another idea on the internet, and I've also done a demo of the implementation:

Http://liuyunzhuge.github.io/blog/mouse_direction/demo2.html

Code:

Https://github.com/liuyunzhuge/blog/blob/master/mouse_direction/demo2.js

Of course, the two demo, from the effect of no difference, their difference is only the mouse moving direction to judge the algorithm is different. This algorithm can be found in demo2.js, and you can find some of its introduction in the following two articles:

Http://www.w3cfuns.com/notes/13989/90cb3c048f6516f8a13a87b5e474a15e:storey-1

Http://sentsin.com/web/112.html

But ashamed of, I did not understand the principle of this idea, so I do not give explanations here, although in other places to see some explanations, but not very clear, so I think there is no simpler way to understand the implementation. In actual work, I think these two ideas are can be used, with which to decide on their own preferences on the line.

Summarize

Finally, I hope this article provides this small thing in your usual work, can come in handy, for your page to add some lively slide into the effect and so on, but also is a accumulation of their own.

Determine the orientation of the mouse when moving out of an element