jQuery 鼠标移动 (光标 "overview" ) 计算错误

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 + '%'
    });
});

我知道，这不是使用百分比的最佳方法，但我不知道如何计算正确的尺寸......有什么建议可以做得更好吗？

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;
}

j查询：

$(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'
   });
});