![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
おはようございます。
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ベストアンサー
- 回答日時:
まずは
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;
この段階で、中心からの角度となりますが、負の値も含むので、180度足して正の値の角度にします
direction = Math.round(角度 ) / 90 + 3) % 4;
で/ 90で4方向に分け、+3で端数切り上げ
roundで四捨五入して% 4でふたたび4等分
※ここの計算はかなりくどいですね、なんでもっと簡単な式にしないのだろうか?
ご説明本当にありがとうございます。m(_ _)m
全く分からなかったのでこれでどのような仕組みか何となく分かりました。m(_ _)m
アスペクト比をかけるのはどういったような意味があるのでしょうか。
試しにアスペクト比を無くしても機能しました。
また、最後の+3で端数切り上げという事ですが、これをする事で0が3になり、1が0になり、2が1になり、3が2になりますが、
これをする事で、switchに返る数を調整しているという事でよろしいのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Excel(エクセル) エクセルの印刷範囲をページ単位で可変にする方法 3 2022/05/23 13:04
- Excel(エクセル) エクセル関数の変わった使い方 3 2022/05/13 17:12
- Excel(エクセル) Excelでなぜこのような式をつかっているのでしょうか、行に1,2,3と連番を振るだけなのに 5 2023/04/08 20:00
- Visual Basic(VBA) VBA初心者です 検索した数字の行に色をつける 5 2023/02/13 14:22
- Mac OS El Capitanがインストールできない… 1 2023/06/16 13:05
- Visual Basic(VBA) VBA 画面上のカーソルに文字数字を入力するコードを教えて下さい 1 2022/10/30 10:31
- 大学・短大 C言語線形リストの問題です 3 2022/12/22 00:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- テレビ テレビの買い替えを検討しています。(PanasonicのVIERAのTH-55JZ1000) 3 2022/06/12 17:02
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
PL/Iについて、教えてください。
-
VBA HTTPを用いたWEB画面の取...
-
マイページはどこを開くの
-
ウインドウを毎回同じ位置、大...
-
デジタル時計の時刻合わせの方...
-
エクセルのシート上に別のシー...
-
エクセルVBAでフォームのListbo...
-
Javascript_submit()完了後に処...
-
一定時間おきにアラームやポッ...
-
ウィンドウの2重起動を防止したい
-
[Java] Edgeでのアドレスバー非...
-
ポップアップウィンドウがブロ...
-
Excelでワードアートや図を常に...
-
VBの画面で、全ウィンドウを一...
-
小さな表示窓の呼び方は
-
Outlookでこのような表示がされ...
-
同じページをブラウザで複数開...
-
スクリプトって、何ですか?ど...
-
「Cancel = True」とはどういう...
-
リストビューをスクロールさせ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【VBA/HTML】特定のタグ要素に...
-
ajax
-
(VBS) テキストファイル読込で...
-
JQuery、セレクトボックスをル...
-
VC++のデバッガでvectorの要素...
-
JavaScriptでクリップボードの...
-
WebサイトのHTMLオブジェクトの...
-
VBA HTTPを用いたWEB画面の取...
-
【VB.NET】HTML要素を取得しよ...
-
スプレッドシートのチェックボ...
-
PL/Iについて、教えてください。
-
no confilict で value値が取れな
-
javascriptを一つのjsファイル...
-
エクセルでタグの内容が取得で...
-
マウスの入って来た方向を検出...
-
マイページはどこを開くの
-
デジタル時計の時刻合わせの方...
-
ウインドウを毎回同じ位置、大...
-
エクセルのシート上に別のシー...
-
一定時間おきにアラームやポッ...
おすすめ情報