माउस स्थिति के संबंध में छवि को घुमाने के लिए कैसे?

Question

मैं इस प्रभाव को करने की कोशिश कर रहा हूं: पृष्ठ के शीर्ष पर http://metatroid.com/articles लेकिन मैं इसे दिए गए कोड के साथ घूमने के लिए नहीं मिल सकता।

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

तो मैंने इस कोड को अपने जावास्क्रिप्ट फ़ंक्शन के तहत रखा और मेरी छवि वर्ग को 'छवि' में बदल दिया लेकिन यह अभी भी घुमाएगा नहीं।

क्या कोई अन्य jquery या css मार्कअप इस से जुड़ा हुआ है या कोई सुझाव जो आप मुझे पर दे सकते हैं यह काम करें? मैं अभी भी इस तरह का नया हूं इसलिए किसी भी मदद की वास्तव में सराहना की जाती है। धन्यवाद।

अद्यतन: मैं काम करने के लिए घुमाने प्रभाव पाने में कामयाब रहे, लेकिन यह सही अक्ष पर बारी बारी से नहीं होता। मैं जिस पर काम कर रहा हूं उसके लिए यूआरएल यहां दिया गया है: http://www.lifetime-watches.com/test/i_watches.html

मैं धुरी/पिवट को कैसे स्थानांतरित करूं ताकि यह पूरी तरह से काम करे?

Answer 1

समस्या यह है कि आप केवल फ़ंक्शन माउस को परिभाषित करते हैं, और केवल इमेज हैंडलर सेट करते हैं, अगर img.length> 0 है। स्क्रिप्ट सिर में स्थित है, और शरीर लोड होने से पहले निष्पादित किया गया है, इसलिए कोई छवि नहीं है ।

फिक्स्ड - छवि को परिभाषित करने के बाद स्क्रिप्ट को दस्तावेज़ के शरीर में ले जाएं। इसके अलावा, आपके पहेली में jQuery शामिल नहीं है (इसके बजाय mootools)। एक बार जब आप उन दो चीजों को ठीक कर लेंगे तो यह काम करेगा।