たとえば、「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>