एक अलग तत्व

Question

में कर्सर स्थिति के आधार पर एक तत्व को घुमाने वाला मैं हाल ही में एक ब्रेडक्रंब निर्देशिका सुविधा पर काम कर रहा हूं जिसके लिए ब्रेडक्रंब कंटेनर तत्व के भीतर कर्सर एक्स स्थिति के आधार पर घूर्णन करने के लिए तत्व की आवश्यकता होती है। लंबी कहानी छोटी, मुझे '# पॉइंटर-बॉक्स' में तीर की आवश्यकता होती है जब यह कर्सर को हमेशा '# target-box' के भीतर इंगित करता है।

मैं दो अलग-अलग सूत्रों की तलाश कर रहा हूं जो एक होगा।) '# Target-box' कर्सर x स्थिति 0 पर है, और बी।) तीर के बाईं ओर रखें किसी भी ब्राउज़र की चौड़ाई या खिड़की के आकार पर आनुपातिक और सबसे अधिक रोटेशन गुण आनुपातिक।

किसी भी मदद की बहुत सराहना की जाती है।

यहां लाइव डेमो है। http://jsfiddle.net/HeFqh/

आप

अद्यतन

मदद Tats_innit से मैं कर्सर जब यह '# लक्ष्य-बॉक्स' के अंदर पर तीर की ओर इशारा करते प्राप्त करने में सक्षम था के साथ धन्यवाद। अब मेरे पास हल करने के लिए दो विशिष्ट मुद्दे हैं।

ए।) जब विंडो का आकार बदलता है तो तीर और कर्सर अब गठबंधन नहीं होते हैं।

ख।) 'Var वाई' शीर्ष की कटौती नहीं कर रहा है 'MouseMove' पर ऑफसेट

var y = e.pageY - this.offsetTop 

अद्यतन लाइव डेमो। http://jsfiddle.net/HeFqh/11/

@ brenjt से आप

Answer 1

हिया धन्यवाद :) चिपकाने ऊपर प्रतिक्रिया इस जवाब के बाद & यहाँ के रूप में एक नमूना डेमो हैhttp://jsfiddle.net/JqBZb/

धन्यवाद और यहाँ आगे उपयोगी लिंक: यहाँ jQuery resize to aspect ratio & How to resize images proportionally/keeping the aspect ratio?

अगर मुझे कुछ याद आया तो कृपया मुझे बताएं! उम्मीद है की यह मदद करेगा! एक अच्छा है, चीयर्स!

jQuery कोड

var img = $('.image'); 
if(img.length > 0){ 
    var offset = img.offset(); 
    function mouse(evt){ 
     var center_x = (offset.left) + (img.width()/2); 
     var center_y = (offset.top) + (img.height()/2); 
     var mouse_x = evt.pageX; var mouse_y = evt.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1) + 90; 
     img.css('-moz-transform', 'rotate('+degree+'deg)'); 
     img.css('-webkit-transform', 'rotate('+degree+'deg)'); 
     img.css('-o-transform', 'rotate('+degree+'deg)'); 
     img.css('-ms-transform', 'rotate('+degree+'deg)'); 
    } 
    $(document).mousemove(mouse); 
} 

​