我希望能够让一个小标记跟随鼠标的移动,同时被细化为某种不是完美矩形的形状。我正在使用一个现有的 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);
谢谢
最佳答案
每当鼠标进入 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”放在矩形的边缘。
关于javascript - 如何在使用 mousemove 函数时在 div 中定义特定边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40326297/