Javascript 随着鼠标越来越近，如何增加元素大小？

我只是在JSFIDLE中胡闹，试图根据鼠标位置调整框的大小。当鼠标移动时，使长方体变大很简单，只需获得距离即可。然而，我想做相反的事；我希望框的大小随着鼠标的靠近而增大，随着鼠标的离开而减小。我还没能想出任何公式。我觉得我可能错过了一些非常简单的东西

#框{
高度：100px；
宽度：100px；
背景：黑色；
}

以下是小提琴的链接：

---

感谢您的帮助，请尝试

distance=Math.max（0200 Math.sqrt（dx*dx+dy*dy））

当鼠标在200px或更远处时，框应该消失，当你靠近中间时，框的大小会稳定地增长到200px。根据需要调整数字（例如，将
Math.sqrt（）
部分除以2以减小距离的影响，或调整
200
以影响最大大小）


我不确定Kolink的回答是否真的做到了你想做的。当鼠标离盒子越来越近时，你似乎希望盒子变大

只需从一些预定义的框大小值中减去
x
和
boxX
，即可：

var dx = 400 - x - boxX,
    dy = 400 - y - boxY;
if(dx<0) dx = 0;
if(dy<0) dy = 0;

var dx=400-x-boxX，
dy=400-y-方形；
如果（DX）太棒了！感谢您的回复，它看起来很有效。
var box = document.getElementById('box');  
// center point of the box
var boxX = 50;
var boxY = 50;
var ux=500, uy=500;// 1.stage
document.addEventListener('mousemove', function(e) {
    var x = e.pageX,
        y = e.pageY;

    var dx = ux-(x - boxX),
        dy = uy-(y - boxY);// 2.stage

    var distance = Math.sqrt(dx *dx + dy * dy);

    box.style.width = box.style.height = distance + 'px';

}, false);

var dx = 400 - x - boxX,
    dy = 400 - y - boxY;
if(dx<0) dx = 0;
if(dy<0) dy = 0;