jQuery mousemove (커서 "개요") 잘못된 계산

Question

나는 문서/커서 "지도 개요"를 만들려고하는데, 계산이 어려워졌습니다. 포인터가 여전히 개요 상자를 초과합니다. 모든 제안을 더 나은 만들기 위해 ...이 비율을 사용하는 가장 좋은 방법은,

var box = $('#box'), 
    pointer = box.find('i'); 

$(window).on('mousemove', function(e) { 

    var pageX = e.clientX, 
     pageY = e.clientY, 
     winW = $(this).width(), 
     winH = $(this).height(), 
     percentX = 100 * pageX/winW, 
     percentY = 100 * pageY/winH; 

    pointer.css({ 
     top: percentY + '%', 
     left: percentX + '%' 
    }); 

}); 

는 나도 몰라,하지만 난 정확한 크기를 계산하는 방법을 잘 모릅니다 :

여기에 지금까지 what I've done입니까?

Answer 1

A)가 정의 된 폭> 1 개

B를 가지고 있기 때문에 당신이 그것을가 겹쳐 있도록 실제 위치의 오른쪽 아래에 위치)하여 상자의 테두리를 겹쳐 항상 것입니다 커서

c) 박스의 경우 오버플로를 숨김으로 설정해야합니다. http://jsfiddle.net/8jJNV/7

편집 :

예를 참조 jsfiddle의 최신 변화에 적응

CSS :

#box { 
    position: fixed; 
    bottom:0; 
    left:0; 
    width: 180px; 
    height: 180px; 
    background: #aaa; 
    overflow: hidden; 
} 

jQuery를 :

$(window).on('mousemove', function(e) { 

    var pageX = e.clientX; 
    var pageY = e.clientY; 
    var winW = $(this).width(); 
    var winH = $(this).height(); 

    if(pageX > winW-5) pageX = winW-5; // deal with scrollbar 

    var boxWidth = 172; 
    var boxHeight = 172; 

    var posX = pageX/winW * boxWidth; 
    var posY = pageY/winH * boxHeight; 

    pointer.css({ 
     top: posY + 'px', 
     left: posX + 'px' 
    }); 

}); 

정확하게 당신이 달성하려고하는 무엇