How to detect Mouse movements using jQuery

Using JavaScript or any other programming language we can add different kind of utilities or functionalities into our web pages.

Different programming languages are available in the market today but for web design and development JavaScript or jQuery and PHP are mostly used.

Using JavaScript you can make your own online applications and add different kind of functionalities into your websites.

One of the things that every Web Designer wants is to detect user actions. You can detect your user actions in different ways and one of them is detect your users Mouse movements.

If you want to detect your users Mouse movements see the demo below it looks something like this.



It is usually used when you are going to to make any application or want to add any functionality in in your website.

I have used jQuery code to detect Mouse movements but you can also use JavaScript instead of jQuery if you want.

Below is the code that can be used to detect Mouse movements using 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>

Variables	Description
yAxis	Movement Of cursor by Y-Axis.
xAxis	Movement Of cursor by X-Axis.

As you know that we have used jQuery code so that it is compulsory to include jQuery library into our webpage and if you have already included jQuery library then you don't have to include it again because that's enough but it should be of latest version.

Conclusion:

I hope that now you are familiar with this functionality to detect Mouse movements using jQuery and now you can easily detect your users interaction or users Mouse movements on your web pages.

If you want to know more please comment below.