JS でマウスがどの方向からコンテナに入るかを決定する Example_JavaScript スキル

マウスがコンテナに入る方向を決定する方法についての質問を偶然思いつきました。最初に思いつくのは、コンテナの 4 つの側面にいくつかのブロックを追加し、マウスが入ったときにどのブロックが最初にマウス イベントをリッスンするかを確認することです。しかし、これは面倒すぎる。グーグルで検索したところ、jqueryに基づいた良い解決策を見つけました。正直に言うと、vardirection = Math.round(((Math.atan2(y, x) * (180 / Math.PI)) 180) / 90。 ) 3) % 4; この文で使われている数学的知識がよくわかりません 原文には英語のコメントがいくつかあるので、一つ一つ説明しません。コードはそれほど多くないので、サンプルを書きました。

<meta charset="UTF-8"> <title>マウスの入力方向を決定します</title> <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> <div id="wrap"> 方向性フィードバック </div>
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

移動マウスを上に置くと、効果を確認できます。返される方向の値はそれぞれ「上、右、下、左」に対応する「0,1,2,3」です

結果の値を切り替えてループすることができます
スイッチ (方向) { ケース0: $(this).html('上に入力'); 壊す; ケース1: $(this).html('右側に入力'); 壊す; ケース 2: $(this).html('以下に入力'); 壊す; ケース 3: $(this).html('左から入力'); 壊す; } [Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

元のコードは jquery に基づいていますが、後でネイティブ js エフェクトを書きました。コードは必要な友人のためにカプセル化されていません。 Firefox などのブラウザは、mouseenter および Mouseleave イベントをサポートしていないため、代わりにマウスオーバーおよびマウスアウトを一時的に使用しました。バブルの問題を解決する必要がある場合は、互換性のある解決策を自分で検索する必要があります。
var ラップ = document.getElementById('wrap'); var hoverDir = 関数(e){ var w=wrap.offsetWidth; var h=ラップ.オフセット高さ; 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 方向 = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) 180) / 90) 3) % 4; var イベントタイプ = e.type; var dirName = new Array('上','右','下','左'); if(e.type == 'mouseover' || e.type == 'mouseenter'){ Wrap.innerHTML=dirName[方向] 'Enter'; }それ以外{ Wrap.innerHTML=dirName[方向] '退出'; } } 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 すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります ]<script> $("#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; var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseenter'){ $(this).html(dirName[direction]+'进入'); }else{ $(this).html(dirName[direction]+'离开'); } }); </script>