¿Eres diseñador web o desarrollador front-end? Si es así, no puedes perderte el evento jQuery PageX/Y que se llevará a cabo próximamente. En TIEngranaje te contamos todo lo que necesitas saber para registrarte y aprovechar al máximo esta importante oportunidad de aprendizaje y actualización en tu carrera profesional. ¡No te lo pierdas!
El evento jQuery pageX y pageY proporciona la posición del puntero del mouse, en relación con el borde izquierdo pageX y/o borde derecho pageY del documento
Sintaxis
event.pageX
event.pageYEjemplo básico
En el siguiente ejemplo de jQuery, el event.pageX y event.pageY se utilizará para mostrar la X y Y posición del cursor del ratón.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-event-pagex-pagey-tutorial/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function (e) {
$("#pos").text("X: " + e.pageX + " | Y: " + e.pageY);
});
});
</script>
</head>
<body>
<div id="pos"></div>
</body>
</html>También puede obtener el pageX y pageY coordenadas para un elemento HTML específico haciendo algunos cambios simples en el jQuery código de la siguiente manera.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-event-pagex-pagey-tutorial/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pos").mousemove(function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$("#pos").text("X: " + x + " | Y: " + y);
});
});
</script>
</head>
<body>
<div id="pos"></div>
</body>
</html>