माउस आकार के रूप में तत्व आकार कैसे बढ़ाएं?

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 आकार में बढ़ते हैं। आवश्यकतानुसार संख्या को समायोजित करें (उदाहरण के लिए, 2 से Math.sqrt() हिस्सा विभाजित प्रभाव दूरी है कि कम करने, या 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

मैं सुनिश्चित नहीं हूं कि कोलिंक के जवाब ने वास्तव में वह किया जो आप करना चाहते थे। ऐसा लगता है कि जब माउस इसके करीब हो रहा है तो बॉक्स बढ़ने की इच्छा है।

बस दोनों 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/