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

当鼠标距离200px或更远时，此框应该会消失，并且当您接近中间时，它会逐渐增大到200px。根据需要调整数字（例如，将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/

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

3 个答案: