Magnifying glass effect based on jquery_jquery

Core code:

Copy code The code is as follows:

$(function(){
var mouseX = 0; //The position of the mouse movement Bottom
var markLeft = 0; //The left distance of the magnifying glass movement
var markTop = 0; //The top distance of the magnifying glass movement
var perX = 0; //X percentage of movement
var perY = 0; //Moved Y percentage
var bigLeft = 0; //The distance the big picture needs to move left
var bigTop = 0; //The distance the big picture needs to move top
//Change The position of the magnifying glass
function updataMark($mark){
//Through judgment, the small frame can only move in the small picture area
if(markLeft<0){
markLeft = 0;
}else if(markLeft>maxLeft){
markLeft = maxLeft;
}

if(markTop<0){
markTop = 0;
}else if(markTop> maxTop){
markTop = maxTop;
}
//Get the moving ratio of the magnifying glass, that is, the moving ratio of this small box 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
$mark.css({"left":markLeft,"top":markTop,"display":"block "});
}
//Change the position of the big picture
function updataBig(){
$(".big").css({"display":"block","left ":bigLeft,"top":bigTop});
}
//When the mouse moves out
function cancle(){
$(".big").css({"display": "none"});
$(".mark").css({"display":"none"});
}
//When the mouse moves on the thumbnail
function imgMouseMove (event){
var $this = $(this);
var $mark = $(this).children(".mark");
//The position of the mouse on 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 main points in this

1. How to follow the big picture The position of the "magnifying glass" while moving the big picture?

In fact, a proportional relationship is used. When the "magnifying glass" moves by how much (it is a ratio, not a specific value), the big picture also uses this at the same time. By multiplying the proportion by the width and height of the large image, you can calculate how far the large image should be moved;

2. What is the relationship between the display area and the magnifying glass?

The "magnifying glass" here should be in proportion to the display area of ​​the large image, and should have the same proportional relationship between the large image and the small image. For example, the ratio of the large picture to the small picture is 1:2, and the size of the "magnifying glass" area should also be 1:2 with the size of the area where the large picture is displayed. Otherwise, the small picture area covered by the "magnifying glass" will be different from the large picture. The display area and displayed image information cannot be consistent. (The example mentioned in the Miaowei Classroom is not consistent);

Online demo: http://demo.jb51.net/js/2012/mymagnifier/

Packaging Download: http://www.jb51.net/jiaoben/45315.html