电商平台详情页-预览图放大镜效果

最新推荐文章于 2023-05-25 10:21:10 发布

老神仙6

最新推荐文章于 2023-05-25 10:21:10 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/weixin_48473854/article/details/120811654

版权

需要实现的效果：

模块包括预览图、遮罩层和放大镜效果-大图；
当鼠标出现在预览图上时，遮罩层、大图出现，鼠标离开时遮罩层、大图消失；
当鼠标在预览图区域移动时，遮罩层、大图随着鼠标移动，遮罩层中点紧随鼠标但不得越过预览图的边框，大图不得越过边框。

具体效果如图：在这里插入图片描述

具体代码

HTML

<div class="preview_img">
        <img src="upload/preview_01.png">
        <!-- 遮罩层 -->
        <div class="mask" style="display: none;"></div>
        <!-- 大图区 -->
        <div class="big" style="display: none;">
            <img src="upload/preview_big.png" class="bigImg">
        </div>
    </div>

.preview_img {
    position: relative;
    width: 400px;
    border: 1px solid #ededed;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: #FEDE4F;
    opacity: .5;
    border: 1px solid #ededed;
    cursor: move;
}

.big {
    position: absolute;
    top: 0;
    left: 410px;
    overflow: hidden;
    width: 500px;
    height: 500px;
    background-color: pink;
    border: 1px solid #ededed;
}

.bigImg {
    position: absolute;
    top: 0;
    left: 0;
}

// 因为js是在头部引入的，所以要添加事件使得当页面的html和css加载完再加载js
window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var bigImg = document.querySelector('.bigImg');

    // 当鼠标经过装图片的盒子时，让遮罩层和大图显示，否则隐藏
    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';
    })

    // 当鼠标在盒子内移动时，给遮罩层和大图传递坐标值以实现随着鼠标移动
    preview_img.addEventListener('mousemove', function(e) {
        // 鼠标在mask内的位置 = 鼠标的页面距离 - 盒子的页面距离
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // mask的left/top值 = 鼠标在mask内的位置 - mask宽度/高度的一半
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // 增加判断条件，限制mask在盒子内移动
        var maskXMax = preview_img.offsetWidth - mask.offsetWidth;
        var maskYMax = preview_img.offsetHeight - mask.offsetHeight;
        if(maskX < 0) {
            maskX = 0;
        } else if(maskX > maskXMax) {
            maskX = maskXMax;
        }
        if(maskY < 0) {
            maskY = 0;
        } else if(maskY > maskYMax) {
            maskY = maskYMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 大图移动 由 mask移动距离/mask最大移动距离 = 大图移动距离/大图最大移动距离 可得 大图移动距离 = mask移动距离*大图最大移动距离/mask最大移动距离
        var bigImgXMax = bigImg.offsetWidth - big.offsetWidth;
        var bigImgYMax = bigImg.offsetHeight - big.offsetHeight;
        bigImg.style.left = -maskX * bigImgXMax / maskXMax + 'px';
        bigImg.style.top = -maskY * bigImgYMax / maskYMax + 'px'; // 1.这里需要用到maskY，所以在前面要给maskY赋值。 2.当遮罩层往右走时，大图是要往左走，所以要加负号
    })
})