How to implement jQuery layer effect following mouse movement_jquery

The example in this article describes how jQuery implements layer effects that follow mouse movement. Share it with everyone for your reference. The specific analysis is as follows:

1. Basic goals

Write a layer that follows the mouse movement,

The current mouse position is displayed in the layer,

As shown below:

The reason why this layer uses jQuery instead of javascript is because the jQuery code is easily compatible with all current mainstream browsers. At least IE8 has no problems. It does not require large sections of code like javascript. Used for compatibility.

2. Production process

The core of this experiment is the mousemove event in jquery,

Triggered when the mouse moves.

The code is as follows:

Copy code The code is as follows:

<script> <br> /*A pair of e.pageX and e.pageY can obtain the current coordinates of the mouse. Note that the e formal parameter is used in the initial function declaration*/ <br> $(document).mousemove(function (e) { <br> var x; <br> var y; <br> var xy="<br>x coordinate: " e.pageX ", y coordinate: " e.pageY; <br> x=e.pageX; <br> y=e.pageY; <br> Document .getElementById("mousePosition").style.left = x "px"; <br> Document .getElementById("mousePosition").style.top = y "px"; <br> $("#mousePosition").html(xy); <br> }) <br> <br> </script>

I hope this article will be helpful to everyone’s jQuery programming.