jQuery mousemove()の例
たとえば、「bigbigbox」のIDを持つ大きな300 x 200 divボックス。
<style type="text/css"> #bigbigbox{ margin:16px 16px 16px 48px; border:1px groove blue; background-color : #BBBBBB; width:300px; height:200px; } #msg{ color:#800000; } </style> <div id="bigbigbox"></div>
この大きなビッグボックスに
mousemove()
イベントをバインドします。
$('#bigbigbox').mousemove(function(event) { var msg = 'mousemove() position - x : ' + event.pageX + ', y : ' + event.pageY; });
マウスがdiv ”
bigbigbox
“要素内を移動すると、
mousemove()
イベントが発生し、
event.PageX
と
event.pageY
を使用してボックス内のマウスの位置を追跡することができます。
ユースケース?
この
mousemove()
イベントをどこに適用しますか?あなたが知っている場合はいくつかお勧めします:)
自分で試してみてください
<html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> #bigbigbox{ margin:16px 16px 16px 48px; border:1px groove blue; background-color : #BBBBBB; width:300px; height:200px; } #msg{ color:#800000; } </style> </head> <body> <h1>jQuery mousemove example</h1> <div id="bigbigbox"></div> <p id="msg"></p> <script type="text/javascript"> var i=0; $('#bigbigbox').mousemove(function(event) { var msg = 'mousemove() position - x : ' + event.pageX + ', y : ' + event.pageY + '[counter]: ' + i++; $('#msg').text(msg); }); </script> </body> </html>