Come aumentare la dimensione dell'elemento quando il mouse si avvicina?

Question

Stavo solo scherzando su jsfiddle cercando di ridimensionare una scatola base sulla posizione del mouse. Rendere la scatola più grande mentre il mouse si allontana è semplice, basta prendere la distanza. Tuttavia, voglio fare il contrario; Voglio che la scatola aumenti di dimensioni quando il mouse si avvicina e diminuisce man mano che il mouse si allontana. Non sono stato in grado di pensare a nessuna formula per questo. Sento che potrebbe esserci qualcosa di veramente semplice che mi manca.

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

Ecco un link per il violino: http://jsfiddle.net/gSDPq/

Ogni aiuto è apprezzato, grazie

Answer 1

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

Questo dovrebbe scomparire quando il mouse è a 200px o più di distanza, e crescere costantemente fino a 200 px di dimensioni man mano che ti avvicini al centro. Regolare i numeri in base alle esigenze (per esempio, dividere la parte Math.sqrt() del 2 per ridurre l'effetto che la distanza ha, o regolare il 200 di influenzare la dimensione massima)

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

non sono sicuro la risposta di Kolink ha effettivamente fatto ciò che volevi fare. Sembra che voglia che la scatola cresca quando il mouse si avvicina ad essa.

Proprio sottraendo sia x e boxX da qualche valore predefinito formato della scatola dovrebbe farlo:

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

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