Case: HD magnifier
3 steps
1. Mouse in and out, display and hide the occlusion layer and big picture div
2. When the mouse moves on the small layer, the horizontal and vertical coordinates of the mouse are the coordinates of the visible area - the width and height of the occlusion layer. When the mouse moves, it moves in an area, so it needs to judge and define the moving area
3. Move in the small graph, corresponding to the coordinates of the large graph, and use the scale to do a/b =c/d, a=bc/d
4. Mobile setting, implemented by marginleft and top of large graph, negative mobile distance
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Ha-ha</title> <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0px; left: 0px; cursor: move; display: none; } .small { position: relative; } </style> </head> <body> <div class="box" id="box"> <div class="small"> <!--Small layer--> <img src="images/small.png" width="350" alt="" /> <div class="mask"></div> <!--Shelter layer--> </div> <!--Small graph--> <div class="big"> <!--Large layer--> <img src="images/big.jpg" width="800" alt="" /> <!--Big picture--> </div> <!--Big picture--> </div> <!--Import external js file--> <script src="common.js"></script> <script> //Get required elements var box = my$("box"); //Get the div var small = box.children[0]; //Shelter once var mask = small.children[1]; //Get large div var big = box.children[1]; //Get a larger picture var bigImg = big.children[0]; //Mouse access to the div box.onmouseover = function () { mask.style.display = "block"; big.style.display = "block"; }; //Mouse away from hidden mask and large image div box.onmouseout = function () { mask.style.display = "none"; }; //Mouse movement events---The mouse is moving on a small layer small.onmousemove = function (e) { //The abscissa and ordinate of the visible area of the mouse at this time //Set the mouse display in the middle of the occlusion layer var x = parseInt(e.clientX - mask.offsetWidth / 2); var y = parseInt(e.clientY - mask.offsetHeight / 2); //Set up margin 100 px Problem of (first let the mouse display in the upper left corner of the occlusion layer) x = x - 100; y = y - 100; //Minimum value of abscissa x = x < 0 ? 0 : x; //Minimum value of ordinate y = y < 0 ? 0 : y; //Maximum value of abscissa x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x; //Maximum value of ordinate y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y; //For occlusion layer left and top assignment mask.style.left = x + "px"; mask.style.top = y + "px"; //Moving distance of occlusion layer/Moving distance of large picture=Maximum moving distance of occlusion layer/Maximum moving distance of large picture //Moving distance of large picture=Moving distance of occlusion layer*Maximum moving distance of large picture/Maximum moving distance of occlusion layer //The maximum horizontal moving distance of large picture var maxX = bigImg.offsetHeight - big.offsetHeight; //The maximum longitudinal moving distance of large picture // var maxY = bigImg.offsetHeight - big.offsetHeight; //Horizontal moving coordinate of large map var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth); //Vertical moving coordinate of large drawing var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth); //Set picture movement bigImg.style.marginLeft = -bigImgMoveX + "px"; bigImg.style.marginTop = -bigImgMoveY + "px"; }; </script> </body> </html>