仿京东淘宝放大镜效果 JavaScript

我该早点睡的

已于 2022-03-19 22:04:18 修改

阅读量208

点赞数 6

文章标签： css3 css html5 javascript

于 2022-03-16 18:50:06 首次发布

本文链接：https://blog.csdn.net/m0_61721166/article/details/123532598

版权

本文详细介绍了如何使用JavaScript实现京东淘宝商品图片的放大镜效果。主要涉及鼠标经过显示遮挡层和大图片，遮挡层跟随鼠标移动以及大图片同步移动的功能。通过offsetWidth和offsetTop获取元素尺寸和位置，并利用鼠标移动事件调整遮挡层和大图片的位置，确保遮挡层在小图片盒子内正确移动，同时避免超出范围。

摘要由CSDN通过智能技术生成

首先我们分析一下整个案例

1.鼠标经过小图片盒子时黄色的遮挡层和大图片盒子显示，离开时隐藏

2.黄色的遮挡层跟随鼠标功能。

3.移动黄色遮挡层，大图片跟随移动功能。

html骨架和css：

<style>
    .preview_img {
        position: relative;
        height: 400px;
        width: 400px;
        border: 1px solid #ccc;
    }
    
    .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 300px;
        background-color: #FEDE4F;
        opacity: .5;
        border: 1px solid #ccc;
        cursor: move;
    }
    
    .big img {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .big {
        display: none;
        position: absolute;
        left: 410px;
        top: 0;
        width: 500px;
        height: 500px;
        border: 1px solid #ccc;
        overflow: hidden;
    }
</style>

<body> 
        <div class="preview_img">
            <img src="tp/jd.png" alt="">
            <div class="mask "></div>
            <div class="big "><img src="tp/jd1.png " alt=" " class="bigImg"></div>
        </div>
</body>

这里黄色遮挡层跟大盒子先隐藏起来display: none

offsetWidth（offsetHight）：它返回该元素的像素宽高度，包含内边距（padding）和边框（border），不包含外边距（margin），单位是像素 px

offsetTop （offsetLeft）：返回当前元素相对于 offsetParent 节点顶部边界的偏移像素值。

获取元素：

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

当我们鼠标经过离开 preview_img 就显示和隐藏 mask 遮挡层和 big 大盒子：

preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';

        big.style.display = 'block';
    })
preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        })

黄色的遮挡层跟随鼠标功能分析：
把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准。首先是获得鼠标在盒子的坐标，
之后把数值给遮挡层做为left和top值。

用到鼠标移动事件，但是还是在小图片盒子内移动。此时发现遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。

遮挡层不能超出小图片盒子范围。如果小于零，就把坐标设置为0；如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动。（距离遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度）

最后移动黄色遮挡层大图片也跟着移动，因为小图片大图片是等比例，所以有：

preview_img.addEventListener('mousemove', function(e) {
        // 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.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 bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })

最后效果：