マウスの入って来た方向を検出するホバーエフェクト

質問

おはようございます。

jquery初心者です。
現在、マウスが要素に入って来た位置と出る位置（上下左右）を検出して、
その方向に合わせてホバーエフェクトをするという物をガイド本に沿って制作しているのですが、
そこでのマウスの方向を検出する関数の説明(特に数学的な処理)が所々省略されていて、ほとんど分かりません。（；；）

おおまかな仕組みは、
switchを使用して、0,1,2,3と分岐させたpositionを作り、この値をマウスの方向を検出する関数で分岐させているといったものです。

マウスの方向を検出する関数は、は以下のようになっています。

function MouseDirection (event) {
var $el = $(event.currentTarget),
offset = $el.offset(),
w = $el.outerWidth(),
h = $el.outerHeight(),

/*この辺りが特に分からないです（;;）*/
x = (event.pageX - offset.left - w / 2) * ((w > h)? h / w: 1),
y = (event.pageY - offset.top - h / 2) * ((h > w)? w / h: 1),
direction = Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90 + 3) % 4;
return direction;

}

三角関数を使用しているようですが、これもまた良く分かっていません（；；）
申し訳ないですが、お教え頂けると助かります。

回答No.1

usami33 · ベストアンサー

まずは
x = (event.pageX - offset.left - w / 2) * ((w > h)? h / w: 1),
置き換えると
x = (マウスの位置 - 要素の座標 - 要素サイズの半分) * ((w > h)? h / w: 1),
x = (要素の中心からの距離) * ((w > h)? h / w: 1),
x = (要素の中心からの距離) * 要素の縦横比（アスペクト比）,
x = アスペクト比を考慮した円周上の点
　　　※縦横が同じ比なら真円、異なれば楕円上の座標

つぎは
direction = Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90 + 3) % 4;
direction = Math.round((Math.atan2(y, x) * (180 / 円周率) + 180) / 90 + 3) % 4;
direction = Math.round(ラジアン * (180 / 円周率) + 180) / 90 + 3) % 4;
direction = Math.round(角度 + 180) / 90 + 3) % 4;
この段階で、中心からの角度となりますが、負の値も含むので、１８０度足して正の値の角度にします
direction = Math.round(角度 ) / 90 + 3) % 4;
で/ 90で４方向に分け、+3で端数切り上げ
roundで四捨五入して% 4でふたたび４等分
※ここの計算はかなりくどいですね、なんでもっと簡単な式にしないのだろうか？

お礼

ご説明本当にありがとうございます。m(_ _)m
全く分からなかったのでこれでどのような仕組みか何となく分かりました。m(_ _)m

アスペクト比をかけるのはどういったような意味があるのでしょうか。
試しにアスペクト比を無くしても機能しました。

また、最後の+3で端数切り上げという事ですが、これをする事で０が3になり、１が０になり、２が１になり、３が２になりますが、
これをする事で、switchに返る数を調整しているという事でよろしいのでしょうか？