マウスが近づくにつれて要素のサイズを大きくする方法は？

Question

私は、マウスの位置にボックスベースのサイズを変更しようとしているjsfiddleをちょうど回っていました。マウスが動くにつれてボックスを大きくすることは簡単ですが、距離を取得するだけです。しかし、私は反対をしたい。私はマウスが近づくにつれてサイズが大きくなり、マウスが動くにつれてボックスが小さくなるようにしたい。私はこれのための数式を考えることができませんでした。本当にシンプルなものがあるかもしれないと感じています。ここで

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

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

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

はバイオリンへのリンクです：すべてのヘルプは高く評価され http://jsfiddle.net/gSDPq/

、おかげ

Answer 1

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

これは、マウスが200ピクセル以上離れるとボックスが消え、中央に近づくにつれて定常的に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

（例えば、最大サイズに影響を与えるとの距離が与える影響を減らす、または200を調整するために2によってMath.sqrt()一部を分割） 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/