Jquery-based magnifier effect _ jquery

Source: Internet
Author: User
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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.