JavaScript Taobao main figure Magnifier function _javascript Skill

工欲善其事, its prerequisite. To achieve a certain effect, we must first understand the principle.
Magnifier's function is to get the mouse in the small image position, and then based on the size of the scale map to the size of the larger picture needs to display the part, and then use the positioning of the larger image to show the part of the right side of the border.
Then look at the code, it's easier to understand the explanation according to the code.

HTML section

<! DOCTYPE html> 
 
 

CSS Section

*{ 
 margin:0; 
 padding:0; 
} 
div{ 
 position:relative; 
} 
div>div{ 
 width:300px; 
 height:300px; 
 Float:left; 
 margin:100px; 
 Overflow:hidden; 
} 
#img_min >img{ 
 /*display:block;*/ 
 width:300px; 
} 
#img_max { 
 display:none; 
  
} 
#img_max >img{ 
 Position:absolute; 
 top:0; 
 left:0; 
 Display:block; 
 width:1500px; 
} 
#mousebg { 
 display:none; 
 Position:absolute; 
 width:60px; 
 height:60px; 
 Background-color:rgba (255,255,255,.7); 
 top:0; 
 left:0; 

The most important JavaScript part

Window.onload = function () {var img1 = document.getElementById (' img_min ');//small diagram box var img2 = document.getElementById (' Img_max ')/large picture box var img2_img = document.getElementById (' img2_img ');//large image var wrap = document.getElementById (' Wrapp 
 Er '); 
 var mousebg = document.getElementById (' MOUSEBG ');//mouse white block var mul = 5;  
  When a module Dispaly:none cannot use offsetwidth to obtain its width high img1.onmouseover = function () {//mouse to enter Img2.style.display = ' block '; 
   
 Mousebg.style.display = ' block '; 
  } img1.onmouseout = function () {//mouse left img2.style.display = ' none '; 
 Mousebg.style.display = ' None '; } img1.onmousemove = function (event) {var _event = event| | 
  window.event;//compatibility processing var mousex = _event.clientx-wrap.offsetleft-img1.offsetleft; 
 
  Calculates the position of the mouse relative to the small map var mousey = _event.clienty-wrap.offsettop-img1.offsettop; 
  Special case processing, close to four edges respectively if (MOUSEX<MOUSEBG.OFFSETWIDTH/2) {mousex = MOUSEBG.OFFSETWIDTH/2; } if (Mousex>img1.offsetwidth-mousebg.offsetwidtH/2) {mousex = IMG1.OFFSETWIDTH-MOUSEBG.OFFSETWIDTH/2; 
  } if (MOUSEY<MOUSEBG.OFFSETHEIGHT/2) {mousey = MOUSEBG.OFFSETHEIGHT/2; 
  } if (MOUSEY>IMG1.OFFSETHEIGHT-MOUSEBG.OFFSETHEIGHT/2) {mousey = IMG1.OFFSETHEIGHT-MOUSEBG.OFFSETHEIGHT/2; 
  }//Calculate the display range of large graphs Img2_img.style.left =-mul*mousex+img2.offsetwidth/2+ "px"; 
  Img2_img.style.top =-mul*mousey+img2.offsetheight/2+ "px"; 
  Make the mouse in the middle of the white block mousebg.style.left = mousex-mousebg.offsetwidth/2+ "px"; 
   
 Mousebg.style.top = mousey-mousebg.offsetheight/2+ "px"; 

 } 
}

If you have read the code and the comments have been understood, with the words of Li Yunlong: "Ah, you son of Tnd is really a genius." So the following section of the analysis you quickly browse the end of the OK.

Parsing section:

HTML and CSS parts are simple layout code, no longer explained, JS part of the code is relatively simple, we directly explain the mouse movement of the event section of the code.
First use a picture to explain how to get the mouse relative and small map position:

You can see by the operation in the code that the value we get is the mouse relative to the upper-left corner of the IMG1.
Having understood this step, it can be said that our work has already been completed in half.
Then, we first skip the processing of special cases, directly to the right image positioning basic operations.
Because it is useful to offsetwidth, offsetheight, Style.width, Style.height properties, where Style.width, Style.height and Offsetwidth, The range of offsetheight is the same, and other differences I'll describe in detail in another blog. Let's take a picture of these properties and compare them with the above attributes (images from the internet, intrusion)

And then we'll explain the code:

The picture in the right large frame is positioned in the large frame with the style.left, the minus is because our mouse is moving in the same direction as the image in our big picture frame, the mul is calculated according to the size of the large and small figures,-mul* MouseX calculated is actually the picture in the large frame of the relative position, but you will find that your mouse position on the right is in the upper left corner of the frame, so we want to add a img2.offsetwidth/2 to let the picture center display. Again, we'll do the same thing on the ordinate.

Calculating the display range of large graphs 
  img2_img.style.left =-mul*mousex+img2.offsetwidth/2+ "px"; 
  Img2_img.style.top =-mul*mousey+img2.offsetheight/2+ "px"; 

Now we're going to have to deal with the special situation, when you do the last step you will find that when the mouse moves to the edge of the mouse that small white block will sometimes run out of the scope of the picture, so we have to deal with it limited to the scope of the picture, because the mouse is in the middle of the white transparent block, So we just limit the mouse to the picture border around One-second white block long/wide position can be.

Special case processing, close to four edges when 
  if (MOUSEX<MOUSEBG.OFFSETWIDTH/2) { 
   mousex = MOUSEBG.OFFSETWIDTH/2; 
  } 
  if (MOUSEX>IMG1.OFFSETWIDTH-MOUSEBG.OFFSETWIDTH/2) { 
   mousex = IMG1.OFFSETWIDTH-MOUSEBG.OFFSETWIDTH/2; 
  } 
  if (MOUSEY<MOUSEBG.OFFSETHEIGHT/2) { 
   mousey = MOUSEBG.OFFSETHEIGHT/2; 
  } 
  if (MOUSEY>IMG1.OFFSETHEIGHT-MOUSEBG.OFFSETHEIGHT/2) { 
   mousey = IMG1.OFFSETHEIGHT-MOUSEBG.OFFSETHEIGHT/2; 
  } 

When the distance to the left is less than one-second wide, we let mousex equal to one-second wide, so that the white block will not continue to move, the other three direction the same.
After this step, our effect is complete.
PS: The place of abstraction can be used to help understand by drawing.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.