图片放大镜效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41671425/article/details/82633753

本文介绍了一种基于HTML、CSS及JavaScript技术实现的图片放大镜效果。通过小图层和遮挡层的交互，实现鼠标悬停时显示放大的图片区域，并跟随鼠标移动实时更新放大内容的位置。

html代码

<body>
<div class="box" id="box">
    <div class="small"><!--小层-->
        <img src="images/small.png" width="350" alt=""/>
        <div class="mask"></div><!--遮挡层-->
    </div><!--小图-->
    <div class="big"><!--大层-->
        <img src="images/big.jpg" width="800" alt=""/><!--大图-->
    </div><!--大图-->
</div>
</body>

css代码

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

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>

js代码

<script>
    var box = my$("box");
    var small = box.children[0];
    var big = box.children[1];
    var mask = small.children[1];
    var bigImg = big.children[0];
    box.onmouseover = function () {
        mask.style.display = "block";
        big.style.display = "block";
    };
    box.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none";
    };

    //鼠标移动事件
    small.onmousemove = function (e) {
        var x = e.clientX - mask.offsetWidth / 2;  //让鼠标在mask中间
        var y = e.clientY - mask.offsetHeight / 2;
        x = x - 100;//解决margin的问题，让鼠标在mask的左上角
        y = y - 100;
        console.log(x);//判断x的范围
        x = x < 0 ? 0 : x;//限制左边  即横坐标的最小值
        y = y < 0 ? 0 : 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 bx = bigImg.offsetWidth - big.offsetWidth;
        //大图的纵向最大移动距离
        var by = bigImg.offsetHeight - big.offsetHeight;
        //大图的移动距离
        var bigImgMoveX = x*bx/(small.offsetWidth - mask.offsetWidth);
        var bigImgMoveY = y*by/(small.offsetHeight - mask.offsetHeight);
        //改变的是大图的margin值
        bigImg.style.marginLeft = -bigImgMoveX + "px";
        bigImg.style.marginTop = -bigImgMoveY + "px";
    };
</script>