javascript - 如何在使用 mousemove 函数时在 div 中定义特定边界

Question

我希望能够让一个小标记跟随鼠标的移动，同时被细化为某种不是完美矩形的形状。我正在使用一个现有的 jsfiddle，我发现它非常接近我想要的，但不完全是我需要的。

这是我现在所在的位置:http://jsfiddle.net/twjeffer/3964w/1106/

上面的问题，我试图将黄点保持在T形内，而不是整个div。我自己关于如何完成这项工作的想法是
A) 使用构成“T”的 2 个不同的 div，或者
B)用“T”形定义黄色标记的边界。

我已经坚持了一段时间，任何帮助或建议将不胜感激!

var mouseX = 0, mouseY = 0, 

        limitX = $('.container').width() - 15,
            limitY = $('.container').height() - 15;

$(window).mousemove(function(e){
  var offset = $('.container').offset() ;
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 30;
    yp += (mouseY - yp) / 30;
    follower.css({left:xp, top:yp});

}, 30);

谢谢

Answer 1

每当鼠标进入 div 时，将“follower”位置设置在 div 之外。

if(mouseX <= 45 && mouseY >= 45){ // if mouse enters first rectangle set it to edge of rectangle, similar procedure for second rectangle
    if(mouseX <= 45){
        mouseX = 50
    }
    if(mouseY >= 45){
        mouseY = 45
    }
}

这只是一个起点，可以改进以精确设置 mouseX 和 mouseY 我只是将“follower”放在矩形的边缘。

http://jsfiddle.net/u7sj6428/