The effect of magnifying glass based on jquery _jquery

Core code:

Copy Code code as follows:

$ (function () {
var mousex = 0; Position of mouse movement X
var mousey = 0; Position of mouse movement Y
var maxleft = 0; Far right
var maxtop = 0; The bottom
var markleft = 0; The left part of the magnifying glass moving the distance
var marktop = 0; The top distance that the magnifying glass moves
var Perx = 0; Percentage of x Moved
var pery = 0; Percentage of y Moved
var bigleft = 0; Large image to move left distance
var bigtop = 0; Large figure to move top's distance
Change the position of the magnifying glass
function Updatamark ($mark) {
By judging, let the small box move only in the small plot area
if (markleft<0) {
Markleft = 0;
}else if (markleft>maxleft) {
Markleft = Maxleft;
}

if (marktop<0) {
marktop = 0;
}else if (marktop>maxtop) {
Marktop = Maxtop;
}
Gets the zoom ratio of the magnifying glass, that is, the ratio of the small box to the region
Perx = markleft/$ (". Small"). Outerwidth ();
Pery = marktop/$ (". Small"). Outerheight ();
Bigleft =-perx*$ (". Big"). Outerwidth ();
Bigtop =-pery*$ (". Big"). Outerheight ();
Set the position of a small box
$mark. css ({"Left": Markleft, ' top ': marktop, "display": "Block"});
}
Change the position of a large image
function Updatabig () {
$ (". Big"). CSS ({"Display": ' Block ', ' left ': Bigleft, "Top": Bigtop});
}
When Mouse moves out
function Cancle () {
$ (". Big"). CSS ({"Display": "None"});
$ (". Mark"). CSS ({"Display": "None"});
}
When moving on a small mouse map
function Imgmousemove (event) {
var $this = $ (this);
var $mark = $ (this). Children (". Mark");
The position of the mouse in the small picture
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 points in this one.

1. How to follow the position of "magnifying glass" and move the larger picture?

In fact, the use of a proportional relationship, when the "magnifying glass" to move how much proportion (is the proportion, not the specific value), the larger picture also use this ratio to multiply the large figure and the width and height, you can calculate the large figure should move how much distance;

2. Show the relationship between the area and Magnifier?

Here the "magnifying glass" should be larger than the size of the display area, which should be the larger picture and small proportional relationship. For example, the ratio of large and small figures is 1:2, the size of the "magnifying glass" area, and the size of the larger area should be 1:2, otherwise the "magnifying glass" covering the small plot area, and large image display area, the display of image information can not be consistent. (The example that is spoken in the wonderful class is not kept one to the other);

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