22.通过元素的偏移量实现放大镜效果

HTML部分： 

<div class="box">

        <img class="yuan" src="images/ldh.jpeg" alt="">

        <div class="mark"></div>

        <div class="big">

            <img class="big_img" src="images/ldh.jpeg" alt="">

        </div>

    </div>

js部分： 

    <script>

        // 1、获取元素

        var box = document.querySelector('.box');

        var mask = document.querySelector('.mark');

        var big = document.querySelector('.big');

        // 2、当鼠标经过和离开box盒子，让遮罩和大盒子显示和隐藏

        box.addEventListener('mouseover', function() {

            mask.style.display = "block";

            big.style.display = "block";

        })

        box.addEventListener('mouseout', function() {

                mask.style.display = "none";

                big.style.display = "none";

            })

            // 3、鼠标移动事件，让遮罩盒子跟随鼠标，先计算出鼠标在盒子内的坐标

        box.addEventListener('mousemove', function(e) {

            var x = e.pageX - this.offsetLeft;

            var y = e.pageY - this.offsetTop;

            // 4、要限制遮罩盒子的移动距离，通过判断遮罩盒子的left和top来限定

            var maskX = x - mask.offsetWidth / 2;

            var maskY = y - mask.offsetHeight / 2;

            //遮罩盒子可以移动的最大距离 box的宽度减去遮罩盒子的宽度

            var maskMax = box.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;

            }

            // 把获取的坐标给到遮罩盒子的top和left

            mask.style.left = maskX + 'px';

            mask.style.top = maskY + 'px';

            // 4、大图片的移动距离 = 遮罩层的移动距离 * 大图片最大移动距离 / 遮罩层最大移动距离

            var big_img = document.querySelector('.big_img');

            // 大图片的最大移动距离 = 大图片的宽度 - 大盒子的宽度

            var big_imgMax = big_img.offsetWidth - big.offsetWidth;

            // 大图片的移动距离

            var bigX = maskX * big_imgMax / maskMax;

            var bigY = maskY * big_imgMax / maskMax;

            big_img.style.left = -bigX + 'px';

            big_img.style.top = -bigY + 'px';

        })

    </script>

最近在发现了一个更简单的实现大图片的移动距离的方法，只需要两句代码即可实现：

            big_img.style.left = -2 * maskX + 'px';

            big_img.style.top = -2 * maskY + 'px';

在布局样式的时候，因为被放大的图片 big_img的宽度和高度被设置为200%，所以在计算大图片的移动可以直接通过 负2倍 * maskX来实现