Rotazione di un elemento in base alla posizione del cursore in un elemento separato

Question

Recentemente ho lavorato a una funzione di directory breadcrumb che richiede la rotazione di un elemento in base alla posizione x del cursore all'interno dell'elemento contenitore breadcrumb. Per farla breve, ho bisogno della freccia nella "casella-puntatore" in basso a puntare sempre il cursore quando si trova all'interno della "casella di destinazione #".

Sto cercando due formule separate che consentiranno a.) Impostare la posizione iniziale più a sinistra della freccia quando la posizione x del cursore di destinazione # è a 0 e b) mantenere la freccia a sinistra -most e right-most proprietà di rotazione proporzionale a qualsiasi larghezza del browser o ridimensionamento della finestra.

Qualsiasi aiuto è molto apprezzato.

Ecco la demo dal vivo. http://jsfiddle.net/HeFqh/

si

Aggiornamento

Grazie Con l'aiuto di Tats_innit sono stato in grado di ottenere la freccia che punta alla posizione del cursore quando è all'interno del 'target-box #'. Ora ho due problemi specifici da risolvere.

a.) Quando la finestra viene ridimensionata, la freccia e il cursore non sono più allineati.

b.) La 'var y' on 'mousemove' non è deducendo la parte superiore di offset

var y = e.pageY - this.offsetTop 

La versione aggiornata di demo live. http://jsfiddle.net/HeFqh/11/

Grazie

Answer 1

Hiya da @ brenjt di :) risposta sopra incollare questo come risposta messaggio & ecco un campione demohttp://jsfiddle.net/JqBZb/

Grazie e il collegamento più utile qui: jQuery resize to aspect ratio & qui How to resize images proportionally/keeping the aspect ratio?

Per favore fatemi sapere se ho perso qualcosa! Spero che questo ti aiuti! buona, Saluti!

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

​