Jquery-based magnifier effect _ jquery

Jquery-based magnifiers implement Code. For more information, see the following core code:

The Code is as follows:

$ (Function (){
Var mouseX = 0; // The cursor position X
Var mouseY = 0; // the position where the mouse moves Y
Var maxLeft = 0; // rightmost
Var maxTop = 0; // bottom
Var markLeft = 0; // The left distance of the magnifier
Var markTop = 0; // The distance from the top of the magnifier
Var perX = 0; // percentage of X that is moved
Var perY = 0; // percentage of Y to be moved
Var bigLeft = 0; // The distance from which the left image is to be moved.
Var bigTop = 0; // The distance from which the top image is to be moved
// Change the magnifier position
Function updataMark ($ mark ){
// Make sure that the small box can only be moved in the area of the small image.
If (markLeft <0 ){
MarkLeft = 0;
} Else if (markLeft> maxLeft ){
MarkLeft = maxLeft;
}

If (markTop <0 ){
MarkTop = 0;
} Else if (markTop> maxTop ){
MarkTop = maxTop;
}
// Obtain the ratio of the magnifier to move, that is, the ratio of the box to move in the area
PerX = markLeft/$ (". small"). outerWidth ();
PerY = markTop/$ (". small"). outerHeight ();
BigLeft =-perX * $ (". big"). outerWidth ();
BigTop =-perY * $ (". big"). outerHeight ();
// Set the position of the small box
Export mark.css ({"left": markLeft, "top": markTop, "display": "block "});
}
// Change the position of the big image
Function updataBig (){
$ (". Big" ).css ({"display": "block", "left": bigLeft, "top": bigTop });
}
// When the mouse is removed
Function cancle (){
$ (". Big" cmd.css ({"display": "none "});
$ (". Mark" ).css ({"display": "none "});
}
// When moving the mouse over a small image
Function imgMouseMove (event ){
Var $ this = $ (this );
Var $ mark = $ (this). children (". mark ");
// Place the cursor over the thumbnail
MouseX = event. pageX-$ this. offset (). left-$ mark. outerWidth ()/2;
MouseY = event. pageY-$ this. offset (). top-$ mark. outerHeight ()/2;
// Maximum value
MaxLeft = $ this. width ()-$ mark. outerWidth ();
MaxTop = $ this. height ()-$ mark. outerHeight ();
MarkLeft = mouseX;
MarkTop = mouseY;
UpdataMark ($ mark );
UpdataBig ();
}

$ (". Small"). bind ("mousemove", imgMouseMove). bind ("mouseleave", cancle );
})

There are two main points in this article:

1. How to move a large image along with the "magnifier?

Actually, a proportional relationship is used. When the "magnifier" moves the ratio (proportion, not specific value), the larger image uses this ratio to multiply the width and height of the larger image, you can figure out how much distance the larger graph is to move;

2. What is the relationship between the display area and the magnifier?

The "magnifier" here should be the same as the ratio of the area displayed in the larger image, and the ratio of the larger image to the smaller one. For example, the ratio of a large image to a small image is, the size of the "magnifier" area, and the size ratio of the area displayed in the big image should also be, otherwise the "magnifier" covers the small image area, the image information displayed cannot be consistent with the display area of the larger image. (The instance mentioned in the wonderful class is not always one );

Online Demo: http://demo.jb51.net/js/2012/mymagnifier/
Package download: http://www.jb51.net/jiaoben/45315.html