Home > Developer > JavaScript
The question of how to determine the direction from which the mouse moves into a container. The first thing that comes to mind is to add several pieces to the four sides of the container, and then you can see which part listens to the mouse event when the mouse enters. However, this is too much trouble. Google found a good solution based on jquery. To be honest, var direction = Math. round (Math. atan2 (y, x) * (180/Math. PI) + 180)/90) + 3) % 4; I did not understand the mathematical knowledge used in this sentence. I will not explain it one by one if there are some English comments in the original article. There are not many codes. I wrote an example directly.
<! DOCTYPE html> <pead> <meta charset = "UTF-8"> <title> determine the direction of the mouse </title> </pead> <body> <style> html, body {margin: 0; padding: 0 ;}# wrap {width: 300px; height: 300px; background: #33aa00; margin: 50px; display: inline-block; font-size: 50px; text-align: center; line-height: 300px ;}</style> direction feedback </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Move the mouse over to see the effect. The returned direction values are 0, 1, 2, and 3 respectively corresponding to "top, right, bottom, left"
Therefore, the result value can be switched to a loop.
Switch (direction) {case 0: Upper (this).html ('enter above '); break; case 1: lower (this).html ('enter right'); break; case 2: expires (this).html ('lower to enter '); break; case 3: expires (this).html ('left to access'); break ;}
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The original code is based on jquery. Later I wrote a native js effect, and the code is not encapsulated. Because firefox and other browsers do not support mouseenter and mouseleave events, I have used mouseover and mouseout for the moment. If you need to solve the bubble problem, search for compatibility solutions by yourself.
Var wrap = document. getElementById ('wrap'); var hoverDir = function (e) {var w = wrap. offsetWidth; var h = wrap. offsetHeight; var x = (e. clientX-wrap. offsetLeft-(w/2) * (w> h? (H/w): 1); var y = (e. clientY-wrap. offsetTop-(h/2) * (h> w? (W/h): 1); var direction = Math. round (Math. atan2 (y, x) * (180/Math. PI) + 180)/90) + 3) % 4; var eventType = e. type; var dirName = new Array ('top ', 'right', 'bottom ', 'left'); if (e. type = 'mouseover' | e. type = 'mouseenter') {wrap. innerHTML = dirName [ction] + '';} else {wrap. innerHTML = dirName [ction] + 'off';} if (window. addEventListener) {wrap. addEventListener ('mouseover', hoverDir, false); wrap. addEventListener ('mouseout', hoverDir, false);} else if (window. attachEvent) {wrap. attachEvent ('onmouseenter', hoverDir); wrap. attachEvent ('onmouseleave ', hoverDir );}
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
