Cómo saber la posición del ratón JQuery, código fuente

En mi coqueteo con JQuery he comenzado a realizar algunas operaciones con los eventos y demás, he de decir que la sencillez con la que se trabaja es absoluta, en relativamente poco tiempo he podido realizar este pequeño ejemplo para mostrar las coordenadas del ratón y cambiar el contenido de una capa para mostrar la información de la posición en x e y del mouse.

El código que viene a continuación no tiene ninguna complicación a mi entender, viene lo suficientemente comentado para saber que es lo que hace 😉

<!DOCTYPE html>

<html>
<head>
<title>Leer la posición del ratón con JQuery y mostrarlas en una capa llamada txtCoordenadas</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>
<script src=»//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js»></script>
<script type=»text/javascript»>

/* JQUERY que toma las coordenadas del ratón dentro del documento y las muestra en la capa Coordenadas*/
$(document).ready(function() {
$(document).mousemove(function(e){
$(‘#txtCoordenadas’).html(«Pos x : » + e.pageX + » | Pos y : » + e.pageY);
});
});
</script>
</head>
<body>
<div id=»txtCoordenadas»></div>

</body>
</html>

Os dejo el ejemplo con su código fuente para saber la posición del ratón JQuery

Si os gusta compartir y comentad! 😉

 

Carlos Dk

Apasionado por la enseñanza y el SEO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.