この命令は、特定の要素上でマウスカーソルが
動いたときに処理を行います。
mousemoveを使用するのは、座標などの情報を取得する
命令と組み合わせるケースがあります。
mousemove()の中のfunction()をfunction(e)にすると、
イベント発生時にe.clientXは現在のマウスのX座標、
e.clientYは現在のマウスのY座標を取得できます。
X座標とY座標は、ブラウザの左上からのマウスカーソルまでの
距離をpixel単位で表したものです。
実行結果はこちらです。
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:960px; height:640px; background-color:aquamarine; font-weight:100; margin:0 auto;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <div id="container"> <p></p> </div><!--contatiner--> <script> $(document).ready(function(){ $("body").mousemove(function(e){ $("p").text("X=" + e.clientX + "<br>" + "Y=" + e.clientY) }); }); </script> </body> </html> |