Determine the direction from which the mouse moves the div ------- Day74, div ------- day74

Determine the direction from which the mouse moves the div ------- Day74, div ------- day74

I found a very interesting effect and felt very beautiful and gorgeous. I would like to introduce the general effect as follows:

When you move the cursor from the left side, the cover layer is crossed from the left side to the cover div, while the cover layer is crossed from the top to the cover div. Similarly, for the right side and the bottom, in which direction does the mouse move the div from and the covering layer disappears? If you still cannot imagine the effect, you can take a look at "" and I will find this effect from above.

In fact, we know about several methods to show the effect of the covering layer. If the covering layer requires a new div, javascript can be fully implemented, and the effect can also be achieved, the width of the covering layer increases from 0 to the width of the div. If the covering layer is a previously hidden div, in addition to using javascript, we can also use the transition width of css3 to achieve the effect. Then we encounter a big problem, that is, to determine the direction from which the mouse is redirected, then the direction from which the cover layer is drawn.

The method I think of is to move the cursor to the initial position, which is closest to the side of the div, And we will know from which direction to move the cursor. Is that true, use the code to implement the following:

Html language:

<div style="margin-left:300px;margin-top:300px;width:400px;height:400px;background:cyan;" id="test"></div>

Js section:

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"); // obtain the test object if (check) {check = false; var x = event. clientX; // The mouse position var y = event. clientY; left = x-test.offsetLeft; // The distance between the mouse and the side of the left side of the div top = y-test.offsetTop; // The distance from the side above the div right = test. offsetLeft + test. offsetWidth-x; // bott distance from the right side of the div Om = test. offsetTop + test. offsetHeight-y; // The distance from the edge below the div to the arr. push (top); arr. push (right); arr. push (bottom); arr. push (left); var least = findLeast (arr); alert (least); // obtain the minimum number of digits in the array, 1, 2, 3, and 4 are left, top, right, and bottom, respectively, to determine the direction} var findLeast = function ([a1, a2, a3, a4]) {var a; var n; a = a1> a2? A2: a1; n = a = a2? 2:1; a = a3>? A: a3; n = a = a3? 3: n; a = a4>? A: a4; n = a = a4? 4: n; return n ;}}

If so, how can we continue to achieve this effect? if you want to write a few more, you should be able to get it. Come here today and try it tomorrow.

For example, when a div element is triggered by a mouse mouseover event, I want to know which direction to move in from top left to bottom.

Neither HTML nor JS provides this function, so it is impossible to determine the direction of movement or from which direction.

However, it provides you with a work und:
Create an adjacent DIV between the upper and lower sides of the DIV as the boundary DIV. In this way, you can determine which boundary DIV is passed before the main DIV to determine the direction from which the DIV enters.
Wang Lei [authoritative expert]

Teaches you a question about how to move the cursor of jquery to the current div and move the cursor away from the div

Incorrect event

Jquery encapsulates such events
Try mouseleave