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

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以影响最大尺寸)