एक चलने योग्य div

Question

के बाहर सबकुछ बाहर करने की कोशिश कर रहा है मैंने एक होवर ज़ूम प्लगइन लिखा है और मैं यह पता लगाने की कोशिश कर रहा हूं कि होवर ज़ूम बॉक्स के बाहर सब कुछ कैसे अंधेरा करना है, और ज़ूम बॉक्स को पारदर्शी बनाना है, लेकिन मुझे एक कठिन समय यह पता लगाने की कोशिश कर रहा है कि मुझे इसके लिए क्या करना है। क्या मैं अस्पष्टता का उपयोग करता हूं? क्या मैं पृष्ठभूमि छवि का उपयोग करता हूं?

अभी यह एक गहरा काला अस्पष्टता बीजी के शीर्ष पर एक सफेद .5 अस्पष्टता दिखा रहा है, लेकिन मैं इसे समझने की कोशिश कर रहा हूं, लेकिन मैं अपने सिर को खरोंच कर रहा हूं। कोई सुझाव सुपर सहायक होगा।

मुझे क्या करना कोशिश कर रहा हूँ:

डेमो: jsfiddle

Answer 1

यहाँ एक समाधान का एक उदाहरण है, लेकिन यह परिवर्तन की एक जोड़ी बनाने के लिए की आवश्यकता है।

यदि आप पृष्ठभूमि छवि को अंतर्निहित छवि के समान ही ज़ूम स्क्वायर सेट करते हैं और मूल छवि के सापेक्ष अपनी स्थिति का नकारात्मक होने के लिए सीएसएस द्वारा इसकी पृष्ठभूमि-स्थिति समायोजित करते हैं ... क्या मैं इसे सही तरीके से समझा रहा हूं?

http://jsfiddle.net/moopet/Be9AA/

महत्वपूर्ण हिस्सा

var left = Math.min(Math.max(relX - 100, 0), $origImg.width() - $zoomBox.width()), 
    top = Math.min(Math.max(relY - 100, 0), $origImg.height() - $zoomBox.height()); 

$zoomBox.css({ 
    left: left, 
    top: top 
}); 

$zoomBox.css({ backgroundPosition: (-left) + "px " + (-top) + "px" }); 

है और मैं बेला के लिए सीएसएस में ज़ूम तत्व की पृष्ठभूमि निर्धारित किया है, लेकिन अगर आप एक से अधिक चित्रों के लिए यह करने के लिए आवश्यक हो तो आप कर सकते थे इसे src विशेषता की प्रतिलिपि बनाकर जेएस में करें।