Haz que una imagen siga el puntero del mouse

Necesito un cohete para seguir los movimientos del puntero del mouse en mi sitio web. Esto significa que debe girar para hacer frente a la dirección del movimiento, y si es posible, acelerar según la distancia que tenga que cubrir. ¿Esto es posible? jquery tal vez?Haz que una imagen siga el puntero del mouse

Fuente

2011-08-22 supernoob

+11

Por favor, abstenerse de utilizar molestias por el estilo en un sitio web a menos que sea un juego. – ThiefMaster

Es posible ... – qwertymk

No necesita jQuery para eso. Necesita obtener las coordenadas del cursor (observe el evento mousemove) y coloque su imagen en consecuencia. En cuanto a la aceleración y la orientación, se pueden encontrar usando forumalae aplicada a la posición actual del cursor en relación con la anterior. La orientación puede ser un problema en los navegadores que no son compatibles con las propiedades modernas de CSS, es posible que necesite una serie de imágenes en diferentes orientaciones y utilice la más cercana. – RobG

usando jquery para registrar .mousemove en el documento para cambiar la imagen .css hacia la izquierda y arriba en event.pageX y event.pageY.

el ejemplo como abajo http://jsfiddle.net/BfLAh/1/

actualiza para seguir lentamente

http://jsfiddle.net/BfLAh/3/

para la orientación, es necesario obtener el css css izquierda y superior actual y comparar con event.pageX y eventos. pageY, luego configure la orientación de la imagen con

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

para el spe ed, puede establecer la duración de la animación de jquery a cierta cantidad.

Fuente

2011-08-22 06:34:47 wizztjh

Esto parece perfecto, ¿podría darme la forma de comparar css arriba y la izquierda con event.pageX, Y? – supernoob

* un ejemplo de cómo ... – supernoob

este es un buen ejemplo de transformación http://www.the-art-of-web.com/css/css-animation/ – wizztjh

Ok, aquí es una simple caja que sigue el cursor:

<script type="text/javascript"> 

function getMouseCoords(e) { 
    var e = e || window.event; 
    document.getElementById('msg').innerHTML = e.clientX + ', ' + 
      e.clientY + '<br>' + e.screenX + ', ' + e.screenY; 
} 


var followCursor = (function() { 
    var s = document.createElement('div'); 
    s.style.position = 'absolute'; 
    s.style.margin = '0'; 
    s.style.padding = '5px'; 
    s.style.border = '1px solid red'; 

    return { 
    init: function() { 
     document.body.appendChild(s); 
    }, 

    run: function(e) { 
     var e = e || window.event; 
     s.style.left = (e.clientX - 5) + 'px'; 
     s.style.top = (e.clientY - 5) + 'px'; 
     getMouseCoords(e); 
    } 
    }; 
}()); 

window.onload = function() { 
    followCursor.init(); 
    document.body.onmousemove = followCursor.run; 
} 

</script> 

<div id="msg" style="width: 1000px; height: 1000px; border: 1px solid blue;"></div>

Haciendo que el resto es un caso sencillo de recordar la última posición del cursor y la aplicación de un forumula para obtener la caja se mueva que no sea exactamente donde el cursor es. Un tiempo de espera también sería útil si la caja tiene una aceleración limitada y debe alcanzar al cursor después de que se detenga. Reemplazar la caja con una imagen es simple CSS (que puede reemplazar la mayor parte del código de configuración para la caja). Creo que el código de pensamiento real en el ejemplo es de aproximadamente 8 líneas.

Seleccione la imagen correcta (use un sprite) para orientar el cohete.

Sí, molesto como el infierno. :-)

Fuente

2011-08-22 06:54:05 RobG

por alguna razón, eso simplemente no funciona: ( – supernoob

No está destinado a ser código terminado, solo es un ejemplo trivial de cómo empezar. También necesitará lidiar con el desplazamiento. – RobG

Aquí está mi código (no optimizado, sino un ejemplo de trabajo completo):

<head> 
<style> 
#divtoshow {position:absolute;display:none;color:white;background-color:black} 
#onme {width:150px;height:80px;background-color:yellow;cursor:pointer} 
</style> 
<script type="text/javascript"> 
var divName = 'divtoshow'; // div that is to follow the mouse (must be position:absolute) 
var offX = 15;   // X offset from mouse position 
var offY = 15;   // Y offset from mouse position 

function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;} 
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;} 

function follow(evt) { 
    var obj = document.getElementById(divName).style; 
    obj.left = (parseInt(mouseX(evt))+offX) + 'px'; 
    obj.top = (parseInt(mouseY(evt))+offY) + 'px'; 
    } 
document.onmousemove = follow; 
</script> 
</head> 
<body> 
<div id="divtoshow">test</div> 
<br><br> 
<div id='onme' onMouseover='document.getElementById(divName).style.display="block"' onMouseout='document.getElementById(divName).style.display="none"'>Mouse over this</div> 
</body>

Fuente

2013-10-03 16:01:10 user2843469

El mejor ejemplo de trabajo para lo que necesito. ¡Muchas gracias! –

Haz que una imagen siga el puntero del mouse

Respuesta

Cuestiones relacionadas