The preparatory work

  1. You need to understand the three mouse events of JS first

    Onmouseenter Enter the mouse

    Onmouseleave mouse out

    Onmousemove Mouse move

    Note: In order to prevent ev.stopPropagation, onmouseover and onmouseout are not used

  2. Understanding the box model

    OffsetParent: The parent of the current box

    OffsetLeft/offsetTop: The offset of the current box from its parent reference

    OffsetWidth/offsetHeight: Width and height of the visible area of the current element (width and height of the content +padding+border)

    ScrollLeft/scrollTop: width/height of the scroll bar

  3. Distinguish between mouse event objects

    Ev.clientx/ev.clienty: X/Y coordinates of the current mouse trigger point from the top left corner of the current window

    Ev.pagex/ev.pagey: X/Y coordinates from the current mouse trigger point to the top left corner of the body (first screen)

    Note: pageX/pageY is not present in the event object of the earlier browser

    ev.pageX = ev.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
ev.pageY = ev.clientY + (document.documentElement.scrollTop || document.body.scrollTop)
Copy the code

  4. If the image is in some boxes, and the distance from the top left corner of the box changes depending on the size of the browser window, the offset is calculated using ev.pagex/ev.pagey instead of ev.clientx/ev.clienty

Train of thought

  1. layout
<div id="smallBox" class="smallBox">
    <img src="smallImg.jpg"/>
    <div class="mask" id="mask"></div>
</div>

<div class="big" id="bigBox">
    <img id="bigImg" src="bigImg.jpg" alt=""/>
</div>
Copy the code
  1. style
.small{width:400px; height:400px} .small img{width:100%; height:100%} .small .mask{width: 200px; height: 200px; Background: Rgba (255, 255, 0, 0.4); position: absolute; left: 0; top: 0; display: none; cursor: move; } .big{ width: 480px; height: 480px; border: 1px solid# 999; position: absolute; top: 0; left: 400px; overflow: hidden; z-index:999; display: none; }.big img{width:800px; height: 800px; }Copy the code

  1. JS logic

    3.1 Trigger when the page is loaded

    window.onload = function() {}Copy the code

    3.2 Get the elements of the operation

    let small = document.getElementById("smallBox"),
    big = document.getElementById("bigBox"),
    bigImg = document.getElementById("bigImg"),
    mask = document.getElementById("mask");
Copy the code

    3.3 Calculate the offset from the small graph to the body

    letSmallLeft = small. OffsetLeft,// smallTop = small. OffsetTop,// smallBox = small; // Calculate the offset of the small graph from the bodywhile(smallBox.offsetParent.nodeName ! = ='BODY'){
    smallBox = smallBox.offsetParent;
    smallLeft += smallBox.offsetLeft;
    smallTop += smallBox.offsetTop;
}
Copy the code

    3.4 Setting the hiding and display of the large image and mask layer when the mouse moves into or out of the small image

    small.onmouseenter = function(){
    big.style.display = "block";
    mask.style.display = "block";
};
small.onmouseleave = function(){
    big.style.display = "none";
    mask.style.display = "none";
};
Copy the code

    3.5 Mask layer moves with the mouse

    small.onmousemove = function(event){ event = event || window.event; / / browser version is compatible with low - low version of the browser does not exist pageX and pageY event. The pageX = event. ClientX + (document. DocumentElement. ScrollLeft | | document.body.scrollLeft); event.pageY = event.clientY + (document.documentElement.scrollTop || document.body.scrollTop); var x = event.pageX - smallLeft - mask.offsetWidth/2; var y = event.pageY - smallTop - mask.offsetHeight/2; mask.style.top = y +"px";
    mask.style.left = x + "px";
}
Copy the code

    3.6 Pull back when the mouse moves within the small picture

    Var maxX = small.clientWidth-mask.clientWidth; Var maxY = small. ClientHeight -mask.clientHeight; // When out of the left side, pull backif(x<0) x=0; // Pull back when out of the right sideif(x>maxX) x=maxX; // The top is outif(y<0) y=0; // Bottom outif(y>maxY) y=maxY;
Copy the code

    3.7 Large picture is displayed according to scale

    Var scale = bigimg.offsetwidth/small.offsetwidth; bigImg.style.marginLeft = -scale * x +"px";
bigImg.style.marginTop = -scale * y +"px";
Copy the code

The main code

//-------------------- HTML start --------------------
<div id="smallBox" class="smallBox">
    <img src="smallImg.jpg"/>
    <div class="mask" id="mask"></div>
</div>
<div class="big" id="bigBox">
    <img id="bigImg" src="bigImg.jpg" alt=""/> </div> //--------------------- HTML end --------------------- //--------------------- CSS start -------------------- .small{width:400px; height:400px} .small img{width:100%; height:100%} .small .mask{width: 200px; height: 200px; Background: Rgba (255, 255, 0, 0.4); position: absolute; left: 0; top: 0; display: none; cursor: move; } .big{ width: 480px; height: 480px; border: 1px solid# 999; position: absolute; top: 0; left: 400px; overflow: hidden; z-index:999; display: none; }.big img{width:800px; height: 800px; } //--------------------- CSS end --------------------- //--------------------- JS start -------------------- window.onload =function(){
    var small = document.getElementById("smallImg"),
        big = document.getElementById("bigBox"),
        bigImg = document.getElementById("bigImg"),
        mask = document.getElementById("imgMask"), smallLeft = small.offsetleft,// smallTop = small.offsetTop,// smallBox = small; // Calculate the offset of the small graph from the bodywhile(smallBox.offsetParent.nodeName ! = ='BODY'){ smallBox = smallBox.offsetParent; smallLeft += smallBox.offsetLeft; smallTop += smallBox.offsetTop; } // Big and mask are displayed when the mouse moves small, and small. Onmouseenter = is hidden when the mouse moves smallfunction(){
        big.style.display = "block";
        mask.style.display = "block";
    };
    small.onmouseleave = function(){
        big.style.display = "none";
        mask.style.display = "none";
    };
    small.onmousemove = function(event){ event = event || window.event; / / browser version is compatible with low - low version of the browser does not exist pageX and pageY event. The pageX = event. ClientX + (document. DocumentElement. ScrollLeft | | document.body.scrollLeft); event.pageY = event.clientY + (document.documentElement.scrollTop || document.body.scrollTop); var x = event.pageX - smallLeft - mask.offsetWidth/2; var y = event.pageY - smallTop - mask.offsetHeight/2; Var maxX = small.clientWidth-mask.clientWidth; Var maxY = small. ClientHeight -mask.clientHeight;if(x<0){// Pull back x=0; } // Pull back when out of the right sideif(x>maxX){ x=maxX; } // The top is outif(y<0){ y=0; } // Bottom outif(y>maxY){
            y=maxY;
        }
        mask.style.top = y + "px";
        mask.style.left = x + "px"; Var scale = bigimg.offsetwidth/small.offsetwidth; bigImg.style.marginLeft = -scale * x +"px";
        bigImg.style.marginTop = -scale * y +"px"; }}; //--------------------- JS end ----------------------Copy the code