图片放大镜

需求场地：pc端商城项目-商品详情

效果：鼠标移动到图片上，将mask覆盖图片区域放大且映射到放大区域内

html布局：

 <!-- 母盒子 -->
    <div id="box">

        <!-- 原图片盒子 -->

        <div id="small">

            <img src="./模型.png" alt="" width="350">

            <!-- 遮罩层 -->

            <div id="mask"></div>

        </div>

        <!-- 放大图片区域盒子 -->

        <div id="big">

            <img src="./模型.png" alt="" width="800">

        </div>

    </div>

css代码

 #box {
        width: 350px;
        height: 350px;
        margin: 100px;
        border: 1px solid #ccc;
        position: relative;
    }
    
    #small {
        position: relative;
        width: 350px;
        height: 350px;
    }
    
    #mask {
        position: absolute;
        bottom: 0;
        width: 175px;
        height: 175px;
        background: rgba(156, 156, 156, 0.4);
        display: none;
        cursor: move;   
   /* cursor 改变光标 */
    }
    
    #big {
        position: absolute;
        left: 400px;
        top: 0;
        width: 400px;
        height: 400px;
        border: 1px solid #ccc;
        overflow: hidden;
        display: none;
    }

JS

获取html元素

  // 母盒子
    var box = document.getElementById("box");

    //原图片盒子

    var small = document.getElementById("small");

    //smallImg小图片

    var smallImg = small.children[0];

    //遮罩层

    var mask = document.getElementById("mask");

    //放大图片盒子

    var big = document.getElementById("big");

    //大图片

    var bigImg = big.children[0];

放大区域显示和隐藏

    // 鼠标进入事件
    small.onmouseover = function() {

            mask.style.display = "block";

            big.style.display = "block"

        }
        // 鼠标进入离出事件
    small.onmouseout = function() {

        mask.style.display = "none";

        big.style.display = "none"

    }

移动放大事件

 small.onmousemove = function(e) {

            //box的外边距，后面x相减目的为了抵消掉margin
            var MaxX = parseInt(window.getComputedStyle(box, null)["marginLeft"]);

            var MaxY = parseInt(window.getComputedStyle(box, null)["marginTop"]);
            console.log(MaxX, MaxY);

            //得到遮罩层的一半宽高，让鼠标跟着遮罩层中间走

            var maskX = -(mask.offsetWidth / 2);

            var maskY = -(mask.offsetHeight / 2);

            var x = e.clientX - small.offsetLeft - MaxX + maskX;

            var y = e.clientY - small.offsetTop - MaxY + maskY;

            //设置x,y最小值

            x = x < 0 ? 0 : x;

            y = y < 0 ? 0 : y;

            //设置x,y最大值

            x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;

            y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;

            mask.style.left = x + "px";

            mask.style.top = y + "px";

            //求大图片移动的距离

            //遮罩层最大移动距离/遮罩层左偏移量 = 大图盒子最大移动距离/大图盒子左偏移量

            //大图盒子移动距离 = 大图盒子最大移动距离*遮罩层左偏移量 /遮罩层最大移动距离

            var bigX = (bigImg.offsetWidth - big.offsetWidth) * x / (smallImg.offsetWidth - mask.offsetWidth);

            var bigY = (bigImg.offsetHeight - big.offsetHeight) * y / (smallImg.offsetHeight - mask.offsetHeight);

            bigImg.style.marginLeft = -bigX + "px";

            bigImg.style.marginTop = -bigY + "px";

        }