Code implementation
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> * {margin: 0; max-width: 100%; clear: both; padding: 0; } .bigbox { width: 400px; height: 400px; border: 1px solid #ccc; position: relative; left: 30px; top: 30px; } .smallimg { width: 400px; height: 400px; position: relative; z-index: 2; } .maskbox { position: absolute; z-index: 999; background-color: yellow; opacity: .3; left: 0px; top: 0px; width: 200px; height: 200px; display: none; } .outbox { position: absolute; left: 420px; top: 0px; width: 800px; height: 800px; border: 1px solid #ccc; display: none; overflow: hidden; } .bigimg { position: relative; left: 0px; top: 0px; width: 1600px; height: 1600px; } </style> </head> <body> <div class="bigbox"> <img class="smallimg" SRC = "http://img0.imgtn.bdimg.com/it/u=2234101414, 26 & gp 3057589362 & FM = = 0. JPG" Alt = "" > < div class =" maskbox "> < / div > < div Class = "outbox" > < img class = "bigimg" SRC = "http://img0.imgtn.bdimg.com/it/u=2234101414, 3057589362 & FM = 26 & gp = 0. JPG" alt=""></div> </div> </body> </html> <script> var bigbox = document.getElementsByClassName('bigbox')[0]; var maskbox = document.getElementsByClassName('maskbox')[0]; var outbox = document.getElementsByClassName('outbox')[0]; var bigimg = document.getElementsByClassName('bigimg')[0]; bigbox.onmouseover = function (e) { maskbox.style.display = 'block'; outbox.style.display = 'block'; bigbox.onmousemove = function (e) { e = e || window.event let x = e.pageX - bigbox.offsetLeft - (maskbox.offsetWidth / 2) let y = e.pageY - bigbox.offsetTop - (maskbox.offsetHeight / 2) console.log(x, y); Var masktop = bigbox.offsetheight - maskbox.offsetheight x = x > 0 ? x : 0 x = x > maskleft ? maskleft : x y = y > 0 ? y : 0 y = y > masktop ? masktop : y maskbox.style.left = x + 'px' maskbox.style.top = y + 'px' bigimg.style.left = -(outbox.offsetWidth / maskbox.offsetWidth) * x + "px" bigimg.style.top = -(outbox.offsetHeight / maskbox.offsetHeight) * y + "px" } } bigbox.onmouseout = function (e) { maskbox.style.display = 'none'; outbox.style.display = 'none'; } </script>Copy the code