Fare yaklaştıkça öğe boyutu nasıl artırılır?

Question

Sadece fare pozisyonunda bir kutu tabanını yeniden boyutlandırmaya çalışırken jsfiddle ile uğraşıyordum. Fare hareket ettikçe kutuyu büyütmek basittir, sadece mesafeyi alın. Ancak, tam tersini yapmak istiyorum; Farenin yaklaştıkça ve fare hareket ettikçe küçültüldüğünde kutunun boyutunun artmasını istiyorum. Bunun için herhangi bir formül düşünemedim. Eksik olduğum basit bir şey olabileceğini hissediyorum. İşte

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

Turp link: Herhangi bir yardım takdir http://jsfiddle.net/gSDPq/

, teşekkürler

Answer 1

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

Bu kutu, farenin 200 piksel veya daha fazla olduğu zaman ortadan kalkmalı ve ortaya yaklaştıkça boyut olarak 200 piksele çıkarılmalıdır. gerektiği gibi rakamları ayarlayın emin değilim

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

(örneğin, maksimum boyutu etkileme mesafe etkisini azaltmak veya 200 ayarlamak için 2 ile Math.sqrt() bölümünü bölmek) Kolink’in cevabı aslında yapmak istediğin şeyi yaptı. Fare ona yaklaştığında kutunun büyümesini istiyor gibisiniz.

Sadece bu yapmalıyım bazı önceden tanımlanmış kutusu boyutu değerinden hem x ve boxX çıkarılarak:

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

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