If the original image is 400px * 400px scaled down to 200px * 200px, the mouse cursor will move the X-axis at 100px and the Y-axis at 100px. Convert the mouse to 200px by 200px. You can customize the mapping size as required

Tip:

  1. Using Chrome and FireFox, offsetWidth (Height) and offsetX (Y) differ by 1px. The trinary operator is currently used to resolve the 1px difference.
  2. The rule found so far is to use a decimal point with a height or width of >=0.5, with Flex, inline-block or no use will also vary by 1px.
  3. The 1px difference above is not the whole picture, but some will and some won’t (it will be normal for a single image). See the printed console.log for details

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { margin: 0; width: 100%; height: 100%; } .img1920,.img319{ display: flex; } .img1920 div,.img319 div{ margin-right: 30px; } </style> </head> <body> </h1> <div class="img1920"> <div> <img src="1532619760582.jpg" alt="" style="width: X: <span>0</span></p> <p> <span>0</span></p> </div> <div> <img src="1532619760582.jpg" alt="" style="width: X: <span>0</span></p> <p> <span>0</span></p> </div> <div> <img src="1532619760582.jpg" alt="" style="width: X: <span>0</span></p> <p> <span>0</span></p> </div> </div> <h1>319*400</h1> <div class="img319"> <div> <img src="123.jpg" alt="" style="width: 220 px "> < p > X picture: < span > 0 < / span > < / p > < p > Y picture: < span > 0 < / span > < / p > < / div > < div > < img SRC =" 123 JPG "Alt =" "style =" width: 420 px "> < p > center X: < span > 0 < / span > < / p > < p > center Y: < span > 0 < / span > < / p > < / div > < div > < img SRC =" 123 JPG "Alt =" "style =" width: A larger 643 px "> < p > X: < span > 0 < / span > < / p > < p > a larger image Y: < span > 0 < / span > < / p > < / div > < div > < img SRC =" 123 JPG "Alt =" "> < p > the original X: < span > 0 < / span > < / p > < p > the original Y: < span > 0 < / span > < / p > < / div > < / div > < h1 > magnified 2000 1920 * 1080 * 2000: </h1> <div> <div> <img src="1532619760582.jpg" alt="" style="width: 2000px; <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> let img = doc.querySelectorAll('img'); let len = img.length; let x = 0; let y = 0; let numY = 0; let numX = 0; for (let i = 0; i < len; i++) { img[i].onmousemove = function (e) { console.log('X:',this.offsetWidth , e.offsetX,'Y:',this.offsetHeight , e.offsetY); numY = this.offsetHeight - 1 === e.offsetY ? this.offsetHeight : e.offsetY; numX = this.offsetWidth - 1 === e.offsetX ? this.offsetWidth : e.offsetX; // this.naturalWidth (original size). You can customize the size according to your own needs. NaturalWidth is only used for demonstration purposes)/this.clientWidth greater than 1 = zoom, less than 1 = zoom // The current moving coordinate = this.naturalWidth x = Math.round((this.naturalWidth / this.clientWidth) * numX); y = Math.round((this.naturalHeight / this.clientHeight) * numY); this.nextElementSibling.querySelector('span').innerText = x; this.nextElementSibling.nextElementSibling.querySelector('span').innerText = y }; } </script> </body> </html>Copy the code