Designer · Publisher
[자바스크립트&제이쿼리] 매개변수_body좌표값 추출, TOOLTIP 본문
body 좌표값 추출
<script>
마우스 움직일 때 좌표 화면에 표시
$(document).ready(function(){
명령어가 2개일 때 동작이 먼저
선택자.명령어(실행)
1. 화면에서 마우스를 움직였을 때 실행
2. 화면에 좌표를 표시
function(e) or function(event) 마우스의 모든 정보를 가지고 오도록
$('body').mousemove(function(e){
body의 배경색이 다른 색상으로 바뀌도록
//$('body').css('background-color','pink');
var x = e.clientX //e라는 매개변수에서 마우스의 x좌표값 추출
var y = e.clientY //e라는 매개변수에서 마우스의 y좌표값 추출
상위 function(event)라고 선언했다면 var x = event.cilentX
//$('body').text(x)
//$('body').text(x+','+y) //좌표,좌표
$('body').html('x좌표값은 :'+x+'<br />y좌표값은 :'+y) //x좌표값은:좌표 y좌표값은:좌표
})
})
</script>
TOOLTIP
<script src="js/jquery-1.12.4.min.js"></script>
<script>
//a태그에 마우스를 올렸을 때 toolyip보이도록
//마우스를 움직였을 때 left, top 값이 마우스 좌표를 따라가도록
$(function(){
$('a').mouseover(function(e){
//$('.tooltip').css('display','block')
// css 여러개 사용
var posX = e.clientX
var posY = e.clientY
$('.tooltip').css({
'display':'block',
'left':posX + 20,
'top':posY - 10
})
})
// mouseout a태그에서 벗어나면 안보이게 처리
$('a').mouseout(function(){
$('.tooltip').css({
'display':'none'
})
})
/* 메서드체인 : 타겟이 동일한 경우 연결해서 사용 가능
$(function(){
$('a').mouseover(function(e){
var posX = e.clientX
var posY = e.clientY
$('.tooltip').css({
'display':'block',
'left':posX + 20,
'top':posY - 10
})
}).mouseout(function(){
$('.tooltip').css({
'display':'none'
})
})
*/
})
</script>
'M' 카테고리의 다른 글
| [제이쿼리] 클릭하면 이미지 변경 (0) | 2017.06.24 |
|---|---|
| [제이쿼리] 부등호연산자, if조건문 (0) | 2017.06.24 |
| [HTML] form 구성 방법 (0) | 2017.06.05 |
| [자바스크립트&제이쿼리] 지역변수, 전역변수 (0) | 2017.05.31 |
| [자바스크립트&제이쿼리] 대입연산자, 문자결합연산자, 산술연산자, 증감연산자 (0) | 2017.05.31 |