An example of how jQuery zoomed in an image when hovering over the mouse

This effect was initially due to the idea of Comrade min. At the beginning, only the pop-up images were fixed and could not be moved with the mouse, but were finally improved, finally, we achieved the desired results. 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.
Copy codeThe Code is as follows:
<UL id = gallery sizcache = "6" sizset = "7">
<LI sizcache = "6" sizset = "7"> <A class = "smallimage" href = "http://www.jb51.net" rel = images/0020.big.jpg> </A>
<LI sizcache = "6" sizset = "8"> <A class = "smallimage" href = "http://www.jb51.net" rel = images/002_big.jpg> </A>
<LI sizcache = "6" sizset = "9"> <A class = "smallimage" href = "http://www.jb51.net" rel = images/003_big.jpg> </A>
</LI> </UL>

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.
Copy codeThe 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:
Copy codeThe Code is as follows:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
// <! [CDATA [
$ (Function (){
Var x = 22;
Var y = 20;
$ ("A. smallimage"). hover (function (e) {// bind a mouse hover event
// Create a p tag to save the enlarged image. this. rel is the path of the large image obtained from tag a and then appended to the body.
$ ("Body "). append ('<p id = "bigimage"> </p> ');
// Change the transparency of the small image to 0.5. Combined with the CSS above, it looks like the image is dimmed.
$ (This). find ('img '). stop (). fadeTo ('low', 0.5 );
// Calculate the coordinates of the mouse and the declared x and y, assign the coordinates to the absolute positioning of the large image, and then display them as fadeIn.
$ ("# Bigimage" ).css ({top :( e. pageY-y) + 'px ', left :( e. pageX + x) + 'px '}). fadeIn ('fast ');
}, Function () {// After the mouse leaves
// Restore the dimmed Image
$ (This). find ('img '). stop (). fadeTo ('low', 1 );
// Remove the new p tag
$ ("# Bigimage"). remove ();
});
$ ("A. smallimage"). mousemove (function (e) {// bind a mouse move event
// Calculate the coordinates of the mouse and the declared x and y and assign them to the coordinates of the absolute positioning of the large image so that the large image can move along with the image.
$ ("# Bigimage" ).css ({top :( e. pageY-y) + 'px', left :( e. pageX + x) + 'px '});
});
});
//]>
</Script>

At this point, the effect is almost the same, but as Comrade LAN qiufeng mentioned, the effect is not perfect yet. If the size of the displayed large image exceeds the browser width, the scroll bar will appear, which is really bad for the user experience. At the weekend, I made some modifications on the basis of the original one.
First, analyze the Train of Thought. By default, the position of the displayed large image is always on the right of the current mouse pointer, if the width of the current mouse pointer is less than the width of the large picture displayed on the right side of the browser, the browser may overflow. Then, you only need to write a statement to determine whether the width of the current mouse pointer from the border on the right of the browser is smaller than the width of the large image, and then display it based on this judgment.
With the above ideas, it is easy to handle. In order to make the code more concise and improve reusability, I added a widthJudge function to determine the width:
Copy codeThe Code is as follows:
Function widthJudge (e ){
// The total width of the page minus the current X coordinate of the mouse to get the width of the Right Border
Var marginRight = document.doc umentElement. clientWidth-e. pageX;
// Obtain the width of the displayed large image
Var imageWidth = $ ("# bigimage"). width ();
// If the width of the right boundary is smaller than the width of the displayed large image
If (marginRight <imageWidth)
{
// Recalculate the value of variable x
X = imageWidth + 22;
// At this time, the position of the big image should be the width of the current mouse pointer minus the value of the new x.
$ ("# Bigimage" ).css ({top :( e. pageY-y) + 'px', left :( e. pageX-x) + 'px '});
} Else {// otherwise
// Still define x As 22. This step must not be omitted because the previous value of x has changed.
X = 22;
// If the width value on the right is enough to show the large image, it will still be displayed according to the original position
$ ("# Bigimage" ).css ({top :( e. pageY-y) + 'px', left :( e. pageX + x) + 'px '});
};
}

Finally, combined with the above Code, the complete jQuery code section is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// <! [CDATA [
$ (Function (){
Var x = 22;
Var y = 20;
$ ("A. smallimage"). hover (function (e ){
$ ("Body "). append ('<p id = "bigimage"> </p> ');
$ (This). find ('img '). stop (). fadeTo ('low', 0.5 );
WidthJudge (e); // call the width judgment Function
$ ("# Bigimage"). fadeIn ('fast ');
}, Function (){
$ (This). find ('img '). stop (). fadeTo ('low', 1 );
$ ("# Bigimage"). remove ();
});
$ ("A. smallimage"). mousemove (function (e ){
WidthJudge (e); // call the width judgment Function
});
Function widthJudge (e ){
Var marginRight = document.doc umentElement. clientWidth-e. pageX;
Var imageWidth = $ ("# bigimage"). width ();
If (marginRight <imageWidth)
{
X = imageWidth + 22;
$ ("# Bigimage" ).css ({top :( e. pageY-y) + 'px', left :( e. pageX-x) + 'px '});
} Else {
X = 22;
$ ("# Bigimage" ).css ({top :( e. pageY-y) + 'px', left :( e. pageX + x) + 'px '});
};
}
});
//]>
</Script>

Solved the problem of image overflow browser, and the effect was quite good. If you like this effect, you can download the source file.