Rotación de un elemento según la posición del cursor en un elemento separado

que he estado trabajando en una característica directorio de migas de pan recientemente que requiere un elemento para girar basa en la posición del cursor x dentro del elemento contenedor de pan rallado. Para abreviar, necesito la flecha en la 'caja puntero #' inferior para siempre apuntar al cursor cuando está dentro del '# target-box'.Rotación de un elemento según la posición del cursor en un elemento separado

Estoy buscando dos fórmulas separadas que a) establezcan la posición inicial más a la izquierda de la flecha cuando la posición del cursor x '# target-box' esté en 0, y b.) Mantengan la flecha a la izquierda -la mayoría y las propiedades de rotación más proporcionales en cualquier ancho de navegador o en el tamaño de la ventana.

Cualquier ayuda es muy apreciada.

Aquí está la demostración en vivo. http://jsfiddle.net/HeFqh/

que

actualización

Gracias Con la ayuda de Tats_innit yo era capaz de conseguir la flecha que apunta en el cursor cuando está dentro de la '# meta-box'. Ahora tengo dos problemas específicos para resolver.

a.) Cuando la ventana se cambia el tamaño de la flecha y el cursor ya no están alineados.

b.) El 'var y' en 'mousemove' no está deduciendo la parte superior de compensación

var y = e.pageY - this.offsetTop

La demostración en vivo actualizada. http://jsfiddle.net/HeFqh/11/

Gracias

Fuente

2012-04-02 ifthatdoesntdoit

Prueba este hombre- podría ayudarle - http://jsfiddle.net/22Feh/5/ Cheerios! –

Gracias por la respuesta. ¿Alguna posibilidad de que puedas apuñalar a la demostración en vivo? Lo intentaré tan pronto como pueda mañana. Cheerios! – ifthatdoesntdoit

¡Claro, hombre, no se preocupe! ¡tómalo con calma! ¡aclamaciones! –

Hiya de @ brenjt de :) respuesta anterior pegar esto como posterior respuesta & aquí es una muestra demostraciónhttp://jsfiddle.net/JqBZb/

Gracias y enlace más útil aquí: jQuery resize to aspect ratio & aquí How to resize images proportionally/keeping the aspect ratio?

Por favor, hágamelo saber si me perdí algo! ¡Espero que esto ayude! ten una buena, ¡Salud!

código 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); 
}

Fuente

2012-04-19 19:24:14

¿Hay alguna manera de activar al presionar y desactivar al soltar? – Mike

@mugur sure ':)' Estoy respondiendo después de loooong en SO: ** demo para ti ** http://jsfiddle.net/dPDF3/1/ ¡Diviértete! * cómo funcionará * haga clic en la aguja y luego gire su mouse/mouse; ¡Ahora haz clic de nuevo y "desvinculará" el movimiento y demás! –

@Tats_innit si está utilizando JQuery antes de la versión 1.7.2, entonces podría simplemente usar img.css ('transform', 'rotate (' + degree + 'deg)'); sin ningún prefijo, ya que las nuevas versiones de JQuery agregan los prefijos automáticamente, espero que esto ayude a alguien. –

Rotación de un elemento según la posición del cursor en un elemento separado

Respuesta

Cuestiones relacionadas