javascript - 当鼠标靠近时如何增加元素大小？

Question

我只是在 jsfiddle 中乱搞，试图根据鼠标位置调整框的大小。当鼠标移开时使框变大很简单，只需获取距离即可。但是，我想做相反的事情；我希望框随着鼠标靠近而增大，随着鼠标移开而减小。我一直无法为此想出任何公式。我觉得我可能缺少一些非常简单的东西。

<div id="box"></div>

#box { height: 100px; width: 100px; background: black; }

var box = document.getElementById('box');

// center point of the box
var boxX = 50;
var boxY = 50;

document.addEventListener('mousemove', function(e) {
    var x = e.pageX,
        y = e.pageY;

    var dx = x - boxX,
        dy = y - boxY;

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

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

}, false);

这是小提琴的链接：http: //jsfiddle.net/gSDPq/

任何帮助表示赞赏，谢谢

Answer 1

尝试distance = Math.max(0,200-Math.sqrt(dx*dx + dy*dy));

当鼠标离开 200 像素或更多时，该框应该会消失，并且当您靠近中间时，该框的大小会稳定增长到 200 像素。根据需要调整数字（例如，将Math.sqrt()部分除以 2 以减少距离的影响，或调整200以影响最大尺寸）

Answer 2

jsfiddle

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

Answer 3

我不确定 Kolink 的回答是否真的做了你想做的事。当鼠标靠近它时，您似乎希望盒子变大。

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

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

http://jsfiddle.net/gSDPq/3/