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

});

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

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

});