広告
Javascriptでマウスの座標(左上端からのX,Y距離)を表示する。
ソースコード
mouse.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<HTML> <HEAD> <TITLE> マウス座標 </TITLE> </HEAD> <BODY> マウス座標 <br> (X,Y) = <input type="text" style="width:50;" id="global_x">, <input type="text" style="width:50;" id="global_y"> <br> <SCRIPT type="text/javaSCRIPT"> (function (){ // スクロール位置取得 function GetScrollPosition(obj){ return{ x:obj.body.scrollLeft || obj.documentElement.scrollLeft, y:obj.body.scrollTop || obj.documentElement.scrollTop }; } // マウス追従 function TailingMouseMotion(e){ var scrlpos = GetScrollPosition(document); var position; // X座標計算 position = document.getElementById("global_x"); position.value = e.clientX + scrlpos.x; // Y座標計算 position = document.getElementById("global_y"); position.value = e.clientY + scrlpos.y; } // イベント処理 if(document.addEventListener){ document.addEventListener("mousemove" , TailingMouseMotion); }else if(document.attachEvent){ document.attachEvent("onmousemove" , TailingMouseMotion); } })(); </SCRIPT> </BODY> </HTML> |
実行結果
次回は適当なgif画像を追従させるようにしたい。
広告
広告
