본문 바로가기

Web Progreming

[ jquery ] 마우스 따라 다니기

$('#img_pop').mousemove(function(e) {
//var position = $(this).position();
var offset = $(this).offset();
var x = e.pageX - (offset.left);
var y = e.pageY - (offset.top);
$('#layer_img_pop').show().css({'left': e.pageX+16, 'top': e.pageY+16});
});


어찌 하다 보니 아래 처럼 바뀌었네... 
아래것은 브라우져 창 크기에 따라 위치가 이동하는 이미지 팝업니다.

div 창이 보여질때 마다 이미지 값을 불러오는거라 그런지 느리다.. 



$('.img_pop').mousemove(function(e) {
$('#org_img_show').attr('src',$(this).find('input').attr('value'));
var WIN_X=$(window).width(); var WIN_Y=$(window).height();
var PAGE_X=e.pageX; var PAGE_Y=e.pageY;
var IMG_X=parseInt($('#layer_img_pop').css('width')); var IMG_Y=parseInt($('#layer_img_pop').css('height'));
var T_WIDTH=PAGE_X+IMG_X; var T_HEIGHT=PAGE_Y+IMG_Y;
var LEFT=PAGE_X+5; var TOP=PAGE_Y+5;
if( T_WIDTH >= WIN_X && T_HEIGHT <= WIN_Y ){
LEFT=PAGE_X-IMG_X-5; TOP=PAGE_Y+5;
}else if( T_WIDTH <= WIN_X && T_HEIGHT >= WIN_Y ){
LEFT=PAGE_X+5; TOP=PAGE_Y-IMG_Y-5;
}else if( T_WIDTH >= WIN_X && T_HEIGHT >= WIN_Y ){
LEFT=PAGE_X-IMG_X-5; TOP=PAGE_Y-IMG_Y-5;
}
$('#layer_img_pop').show().css({'left':LEFT,'top':TOP});
});