Con la función de jQuery mousemove() podemos detectar el movimiento del ratón en una página web o en un determinado elemento. En este post vamos a ver cómo detectar su movimiento y con la ayuda de otras funciones de jQuery daremos con su posición.
Otras funciones que controlan el puntero del raton son:
Vamos a ver la sintaxis de esta función de jQuery extraída de su web oficial:
$(selector).mousemove(funccion)
Repaso la sintaxis:
Vamos a ver este ejemplo de mousemove() para detectar el movimiento del ratón y detectar su posición absoluta en la página web, en un elemento y en la parte visible del navegador.
$(document).ready(function(){ $(document).mousemove(function(event){ $("#texto").text("Coordenadas en del ratón en la parte visible del navegador: " + event.clientX + ", " + event.clientY); $("#texto2").text("Coordenadas absolutas del ratón en la página actual: " + event.pageX + ", " + event.pageY); }); $("#prueba").mousemove(function(event){ var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; $("#texto3").text("Coordenadas del ratón dentro del elemento: " + x + ", " + y); }); });
Os explico el código del primer bloque del código:
Vamos con el segundo bloque:
Con estos ejemplos sabemos cómo obtener la posición del ratón en los diferentes casos que se nos puedan presentar.
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: