Cómo detectar los movimientos del mouse usando jQuery

Usando JavaScript o cualquier otro lenguaje de programación podemos agregar diferentes tipos de utilidades o funcionalidades a nuestras páginas web.Hay diferentes lenguajes de programación disponibles en el mercado hoy en día, pero para el diseño y desarrollo web se utilizan principalmente JavaScript o jQuery y PHP.

Con JavaScript, puede crear sus propias aplicaciones en línea y agregar diferentes tipos de funcionalidades a sus sitios web.

Una de las cosas que todo diseñador web quiere es detectar las acciones de los usuarios. Puede detectar las acciones de sus usuarios de diferentes maneras y una de ellas es detectar los movimientos del mouse de sus usuarios.

Si desea detectar los movimientos del mouse de sus usuarios, vea la demostración a continuación, se parece a esto.

Por lo general, se usa cuando va a realizar cualquier aplicación o desea agregar alguna funcionalidad en su sitio web.

He usado el código jQuery para detectar los movimientos del mouse, pero también puede usar JavaScript en lugar de jQuery si lo desea.

A continuación se muestra el código que se puede usar para detectar los movimientos del mouse usando jQuery.

<script>
//<![CDATA[
var pageX = $(document).width();
var pageY = $(document).height();
var mouseY=0;
var mouseX=0;

$(document).mousemove(function( event ) {
  //verticalAxis
  mouseY = event.pageY;
  yAxis = (pageY/2-mouseY)/pageY*300; 
  //horizontalAxis
  mouseX = event.pageX / -pageX;
  xAxis = -mouseX * 100 - 100;

  alert('right:'+xAxis +"px n top:"+yAxis +'px' ); 

  //console.log('X: ' + xAxis);

});
//]]>
</script>

VariablesDescripción
eje yMovimiento del cursor por el eje Y.
eje xMovimiento del cursor por el eje X.

Como sabéis hemos utilizado código jQuery por lo que es obligatorio incluir biblioteca jQuery en nuestra página web y si ya ha incluido la biblioteca jQuery, entonces no tiene que volver a incluirla porque eso es suficiente, pero debería ser de la última versión.

Conclusión:

Espero que ahora estés familiarizado con esta funcionalidad para detectar movimientos del mouse usando jQuery y ahora puede detectar fácilmente la interacción de sus usuarios o los movimientos del mouse de los usuarios en sus páginas web.

Si quieres saber más por favor comenta abajo.

Entradas relacionadas

Deja una respuesta

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