Come ruotare l'immagine in relazione alla posizione del mouse?

Question

Sto provando a fare questo effetto: http://metatroid.com/articles nella parte superiore della pagina ma non riesco a farlo ruotare con solo il codice che hanno dato.

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

così ho messo questo codice sotto la mia funzione JavaScript e ha cambiato la mia classe immagine di 'immagine', ma ancora non sarebbe ruotare.

C'è qualche altro jquery o css markup associato a questo o qualche suggerimento che mi puoi dare a fare questo lavoro? Sono ancora un po 'nuovo per questo, quindi qualsiasi aiuto è molto apprezzato. Grazie.

UPDATE: Sono riuscito a far funzionare l'effetto di rotazione, ma non ruoterebbe sull'asse destro. Ecco l'url per cosa sto lavorando: http://www.lifetime-watches.com/test/i_watches.html

Come si sposta l'asse/il perno in modo che funzioni perfettamente?

Answer 1

Il problema è che si definisce solo il mouse funzione e si imposta solo il gestore eventi, se img.length è> 0. Lo script si trova nella testa ed è eseguito prima che il corpo possa caricare, quindi non c'è immagine .

Correggi: sposta lo script nel corpo del documento dopo il punto in cui è definita l'immagine. Inoltre, il tuo violino non include jQuery (mootools invece). Una volta sistemate queste due cose, funzionerà.