jquery mousemoveメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery mousemove()メソッド

mousemoveメソッドは、セレクタで指定した要素の上でマウスがうごいたときに実行されるメソッドです
function()の中にeを入れると座標を取得するプロパティが使えるようになります
e.clientY マウスのY座標を取得する
e.clientX マウスのX座標を取得する

$("セレクタ").mousemove(function(e){
	マウスが動いたときの処理
});

指定した要素の上でマウスが動いたときにイベントを実行する

セレクタで指定したHTML要素の上でマウスを動かすとXとYの座標を取得し表示するコードです

jquery

$(function() {
	$("#hoge").mousemove(function(e){
	$("#hoge2").html("マウスのX座標 "+ e.clientX +"<br>マウスのY座標 "+ e.clientY);
	});
});
css
#hoge{
 border: solid 1px;
 background-color: #66FF00;
 height: 200px;
 width: 200px;
 }

html

<div id="hoge">マウスムーブ</div>
<span id="hoge2">マウスのX座標<br>マウスのY座標</span>

実行後

マウスムーブ
マウスのX座標
マウスのY座標



指定した要素上でマウスを動かすと座標を取得できます








(C)2012 ホームページ作成無料