Imitating the magnifying glass effect of JD products -- JS Foundation

The analysis idea of imitating the effect of JD product magnifying glass

#### Mainly practice element offset offset Series
Display function ：

1. The mouse passes the picture box （ ** name :preview-img **), A small transparent box will appear under the mouse arrow （ name :mask), and A big picture box （ name :box)
2. mask Used as a magnifying glass , Will follow the mouse in preview-img Internal movement ;
3. Mouse in **preview-img When moving inside ,box The pictures in the will also follow the mouse preview-img ** Internal movement ;
4. When the mouse weighs out preview-img,mask and box Also disappeared ;

To achieve the above functions , Disassembly procedure

1. Write html frame

 <div class="preview-img">
        <img src="images/banner1.jpg" alt="" class="min-img">
        <div class="mask"></div>
        <div class="box">
            <img src="images/banner1.jpg" alt="" class="boxImg">
        </div>
    </div>

2. Definition of style

.preview-img{position:relative;width:400px;height:400px;text-align:center;border:solid 1px #ccc;}.min-img{width:400px;height:400px;}.mask{display:none;position:absolute;top:0;left:0;width:300px;height:300px;background-color:rgba(0,0,0,.3);}.box{display:none;position:absolute;top:0;right:-510px;width:500px;height:500px;z-index:999;overflow:hidden;}.box img{position:absolute;top:0;left:0;width:800px;height:800px;}

3. js Code

// Get elements 
var preview = document.querySelector('.preview-img');
var mask = document.querySelector('.mask');
var box = document.querySelector('.box');


// The mouse passes through the big box ,mask 、box  Show 
function over() {
    
    mask.style.display = 'block';
    box.style.display = 'block';
};
preview.addEventListener('mouseover', over);


// The mouse leaves the big box ,mask 、box  hide 
function out() {
    
    mask.style.display = 'none';
    box.style.display = 'none';
};
preview.addEventListener('mouseout', out);

// Get the real-time coordinates of the mouse moving in the box   Assign a value to mask layer 
//
function move(e) {
    
    var x = e.pageX - preview.offsetLeft;
    var y = e.pageY - preview.offsetTop;
    var maskX = x - mask.offsetWidth / 2;
    var masky = y - mask.offsetHeight / 2;
    // If  maskX  Less than equal 0  Let it be equal to 0  Not allow masky  beyond preview  The left and right borders of 
    var maskMax = preview.offsetWidth - mask.offsetWidth;
    if (maskX <= 0) {
    
        maskX = 0
    } else if (maskX >= maskMax) {
    
        maskX = maskMax
    }
    
	// If  masky  Less than equal 0  Let it be equal to 0, Not allow masky beyond preview  The upper and lower boundaries of 
    if (masky <= 0) {
    
        masky = 0
    } else if (masky >= preview.offsetHeight - mask.offsetHeight) {
    
        masky = preview.offsetHeight - mask.offsetHeight
    }
    
	//offset Series can only read values without units ,style You can modify the number  
    mask.style.left = maskX + 'px';
    mask.style.top = masky + 'px';

   // Get the element of the largest picture 
    var boxImg = document.querySelector('.boxImg');
    // The moving distance of the big picture  
    var bigMax = boxImg.offsetWidth - box.offsetWidth;
    
   // Moving distance of large map =mask Moving distance * The maximum moving distance of the big picture  / The maximum moving distance of the occlusion layer  
   // The moving distance of the big picture  X Y
    var bigX = maskX * bigMax / maskMax;
    console.log(maskX);
    var bigY = masky * bigMax / maskMax;
    
   //style Assign to big picture x The distance between the upper distance and the base left distance  
    boxImg.style.left = -bigX + 'px';
    boxImg.style.top = bigY + 'px';
}
preview.addEventListener('mousemove', move);

ps: The most difficult point for me is to understand this and calculate the moving distance of the big picture Formula
== Moving distance of large map =mask Moving distance * The maximum moving distance of the big picture / The maximum moving distance of the occlusion layer ==