JQuery: how to enlarge an image when hovering over the mouse _ jquery

This is a jQuery-based effect. When the mouse hangs over a small image, a large image will pop up, and the big image will move with the mouse. This effect was originally originated from Comrade Min's idea, at the beginning, only the pop-up images are fixed and cannot be moved with the mouse. Finally, they are improved to achieve the desired effect. Today, we will share with you the experience in making this effect. First, let's take a look at the final effect demonstration:

HTML structure:
First, write an unordered list structure. The img label in tag a is used to store small images, and the rel attribute is added to tag a to store the enlarged image path.

The Code is as follows:

• 
  
• 
  
• 
  

CSS style sheets:
Bigimage is the id of a p tag created with jQuery. It is used to save the enlarged image, set its style to absolute positioning, and hide it first. Add a black background to tag a to pave the way for the image to become darker. In this way, a simple album effect is ready.

The Code is as follows:

Ul # gallery {list-style: none; width: 660px; margin: 0 auto 10px; padding-left: 20px; border: 1px solid # d3d3d3; background: # fff; overflow: hidden ;}
Ul # gallery li {width: 200px; height: 200px; float: left; margin: 20px 20px 20px 0 ;}
Ul # gallery li. smallimage {background: #333;/* Add a black background to pave the way for the image to become darker */display: block; width: 200px; height: 200px ;}
# Bigimage {position: absolute; display: none;/* set relative positioning of the parent label of the large image and set the display style to hidden */}
# Bigimage img {width: 400px; height: 400px; padding: 5px; background: # fff; border: 1px solid # e3e3e3 ;}

JQuery code:
Declare two variables x first, and y is used to save the distance between the enlarged image and the mouse. Append a p tag with id bigimage to the body to save the enlarged image. The path of the large image is included in the rel attribute of tag. When you hover the mouse over a small image, assign the obtained mouse coordinates in the browser to the coordinates of the absolute positioning of the large image, and display them in a light effect. Then, bind a mousemove event to the small image, that is, when the mouse moves, the big image will move with the mouse. See the following code:

The Code is as follows: