js实现图片放大镜效果

图片放大镜效果
css代码：

<style>
        *{
            margin: 0;
            padding: 0;
        }

        .smallBox {
            position: relative;
            width: 200px;
            height: 200px;
            padding: 10px;
            margin: 100px 0 0 100px;
            border: 1px solid #ccc;
        }

        .smallBox img {
            width: 100%;
            height: auto;
        }

        .mask {
            display: none;
            width: 80px;
            height: 80px;
            background: #F4D03F;
            opacity: 0.5;
            z-index: 12;
            position: absolute;
            top: 0;
            left: 0;
        }

        .bigBox{
            display: none;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            position: absolute;
            left: 330px;
            top: 100px;
            z-index: 10;
            overflow: hidden;
        }

        .bigImg {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
        }
    </style>

js代码：

	<div class="smallBox">
        <img src="./img/text.jpg" />
        <div class="mask"></div>
    </div>
    <div class="bigBox">
        <img class="bigImg" src="./img/text.jpg" />
    </div>
    <script>
        var small = document.querySelector('.smallBox');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.bigBox');
        var bigImg = document.querySelector('.bigImg');

        small.addEventListener('mouseover', function(){
            mask.style.display = 'block';
            big.style.display = 'block';
        })
        small.addEventListener('mouseout', function(){
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        small.addEventListener('mousemove', function(e){

            // e.pageX || e.pageY 鼠标移动时到左侧（顶部）body的距离
            // this.offsetLeft => small.offsetLeft 小盒子到左侧body的距离
            // this.offsetTop => small.offsetTop 小盒子到顶部body的距离

            // 遮挡层移动距离 X Y：鼠标距离body左侧（顶部）的距离 - 小盒子距离body左侧（顶部）的距离
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;

            // 鼠标放在遮挡层中间 mask.offsetWidth / 2 || mask.offsetHeight / 2
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;

            // 遮挡层最大移动距离：小盒子的宽度 - 遮挡层的宽度
            var maskMax = small.offsetWidth - mask.offsetWidth;
            if(maskX <= 0) {
                maskX = 0; 
            } else if( maskX >= maskMax) {
                maskX = maskMax
            }
            if(maskY <= 0) {
                maskY = 0
            } else if( maskY >= maskMax) {
                maskY = maskMax
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

            // 大图片最大移动距离: 大图片的宽度 - 大盒子的宽度
            var bigMax = bigImg.offsetWidth - big.offsetWidth

            // 大图片移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层最大移动距离
            // 大图片移动距离 X Y
            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax/ maskMax;

            // 为了让大图片移动方向跟鼠标移动方向相反 添加个负号即可：-bigX || -bigY 
            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';
        })
    </script>