图片放大镜效果_放大后的效果 maskx>maskmaxx-优快云博客

本文链接：https://blog.youkuaiyun.com/CLhen/article/details/125640869
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            position: relative;
        }

        .picbox {
            width: 500px;
            height: 312.5px;
            position: absolute;
            left: 100px;
        }

        .pic {
            width: 500px;
        }

        .bigPic {
            position: absolute;
            top: 0;
            left: 0;
        }

        .mask {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            opacity: .5;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }

        .bigbox {
            width: 600px;
            height: 600px;
            background-color: #eee;
            position: absolute;
            left: 600px;
            top: 0;
            display: none;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="picbox">
            <img src="img\1641115696035.jpeg" class="pic">
            <div class="mask"></div>
        </div>
        <div class="bigbox">
            <img src="img\1641115696035.jpeg" class="bigPic">
        </div>
    </div>
    <script>
        var big = document.querySelector('.bigbox')
        var pic = document.querySelector('.picbox')
        var mask = document.querySelector('.mask')
        pic.addEventListener('mouseover', function () {
            big.style.display = 'block'
            mask.style.display = 'block'
        })
        pic.addEventListener('mouseout', function () {
            big.style.display = 'none'
            mask.style.display = 'none'
        })
        pic.addEventListener('mousemove', function (e) {
            var x = e.pageX - this.offsetLeft
            var y = e.pageY - this.offsetTop
            maskX = x - mask.offsetWidth / 2
            maskY = y - mask.offsetHeight / 2
            maskMaxX = pic.offsetWidth - mask.offsetWidth
            maskMaxY = pic.offsetHeight - mask.offsetHeight
            maskX <= 0 ? maskX = 0 : maskX
            maskX >= maskMaxX ? maskX = maskMaxX : maskX
            maskY <= 0 ? maskY = 0 : maskY
            maskY >= maskMaxY ? maskY = maskMaxY : maskY
            mask.style.left = maskX + 'px'
            mask.style.top = maskY + 'px'
            // 大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
            var bigPic = document.querySelector('.bigPic')
            var bigMaxX = bigPic.offsetWidth - big.offsetWidth
            var bigMaxY = bigPic.offsetHeight - big.offsetHeight
            var bigMoveX = maskX * bigMaxX / maskMaxX
            var bigMoveY = maskY * bigMaxY / maskMaxY
            bigPic.style.left = -bigMoveX + 'px'
            bigPic.style.top = -bigMoveY + 'px'
        })
        // 遮挡层移动距离maskX maskY
        // 遮挡层最大移动距离maskMaxX  maskMaxY 
        // 大图片最大移动距离bigMaxX  bigMaxY 
    </script>
</body>