js vue 图片缩放后鼠标坐标映射（相对位置）-一一网

提示：
1、测试使用的chrome和FireFox，发现offsetWidth（Height）和offsetX（Y）会相差1px。目前使用三目运算符来判断解决相差1px的问题。
2、目前发现的规律是使用高度或宽度有>=0.5的小数点，使用flex，inline-block或不使用也会相差1px。
3、以上说的相差1px并不是全部图片，而是有些会有些不会。具体可以看打印出来的console.log
4、如有大佬发现规律还望告知。

<!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>1920*1080：</h1>
<div class="img1920">
    <div>
        <img src="https://juejin.cn/post/1532619760582.jpg"  style="width: 220px">
        <p>小图X：<span>0</span></p>
        <p>小图Y：<span>0</span></p>
    </div>
    <div>
        <img src="https://juejin.cn/post/1532619760582.jpg"  style="width: 420px">
        <p>中图X：<span>0</span></p>
        <p>中图Y：<span>0</span></p>
    </div>
    <div>
        <img src="https://juejin.cn/post/1532619760582.jpg"  style="width: 643px">
        <p>大图X：<span>0</span></p>
        <p>大图Y：<span>0</span></p>
    </div>
</div>
<h1>319*400</h1>
<div class="img319">
    <div>
        <img src="https://juejin.cn/post/123.jpg"  style="width: 220px">
        <p>小图X：<span>0</span></p>
        <p>小图Y：<span>0</span></p>
    </div>
    <div>
        <img src="https://juejin.cn/post/123.jpg"  style="width: 420px">
        <p>中图X：<span>0</span></p>
        <p>中图Y：<span>0</span></p>
    </div>
    <div>
        <img src="https://juejin.cn/post/123.jpg"  style="width: 643px">
        <p>大图X：<span>0</span></p>
        <p>大图Y：<span>0</span></p>
    </div>
    <div>
        <img src="https://juejin.cn/post/123.jpg" >
        <p>原图X：<span>0</span></p>
        <p>原图Y：<span>0</span></p>
    </div>
</div>
<h1>1920*1080放大2000*2000：</h1>
<div>
    <div>
        <img src="https://juejin.cn/post/1532619760582.jpg"  style="width: 2000px;height: 2000px">
        <p>原图X：<span>0</span></p>
        <p>原图Y：<span>0</span></p>
    </div>
</div>
<script>
    let doc = document;
    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（原图大小。可按自己需求自定义设置大小，naturalWidth只是演示使用） / this.clientWidth 大于1 = 是放大,小于1 = 是缩小
            // 放大或缩小的倍数 * 当前移动坐标 = 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>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端