Jquery[제이쿼리] event.pageX/pageY 배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] event.pageX/pageY 를 배워보겠습니다.

이렇게 준비해보았습니다.

실행 화면입니다.
아직뭔가 허전하네요

하지만 오늘은 마우스를 움직일때마다 <label>태그를 사용하여 따라다니게 만들어 볼꺼에요^ㅡ^/

=============================== 
$('.l1').hide();
=============================== 
<label>태그는 일단 숨겨두었습니다.

착한사람눈에는보여요

=============================== 
$('.div0').on('mousemove',function(e){
   $('.l1').html("마우스 좌표 <br>left(pageX): "+e.pageX+"<br>top(pageY): "+e.pageY);
   $('.l1').show().css({
    "position": "absolute",
    "top":e.pageY,
    "left":e. ,
    "z-index":1
   });
  });
===============================
class div0에서 mousemove 하면 <== 마우스가 움직일떄입니다 ㅎ
class l1의 <== <label>태그 입니다.
내용/css를 위에 내용처럼 변경하도록 하는 소스입니다.
css에보면 top/left값이 pageY,pageX로 변경되기때문에 
마우스로 움직일때마다 <label>태그가 마우스옆에 따라다니게 된답니다.

※pageX란 페이지의 왼쪽 구석에서부터 마우스 위치의 X값을 구하는 녀석입니다.
※pageY란 페이지위 위쪽 구석에서부터 마우스 위치의 Y값을 구하는 녀석입니다.

이해가 안되는 분들은 ↓↓↓↓↓↓
http://api.jquery.com/event.pageX/

http://api.jquery.com/event.pageY/

마우스를 움직일때마다 마우스 좌표값이나오는 모습입니다.

아래로 움직이니 똑같이 좌표값이 변하네요^ㅡ^/

오늘은 제이쿼리[jquery] event.pageX/pageY 를 배워보았습니다.
그럼 다음에 또만나요~