图片放大镜效果

2024-03-11 10:15:01

案例分析

//案例分三大块

//1 鼠标经过图片盒子 遮罩盒子 和 放大镜盒子显示 鼠标离开 它们隐藏

//2 遮罩层跟随鼠标移动功能

//3 移动黄色遮罩层 大图片跟随移动

1）第一部分思路

2）第二部分思路

3）第三部分思路

4）最大移动值的概念

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机详情页！</title>
    <style>
        .preview_img {
            position: relative;
            width: 398px;
            height: 398px;
            border: 1px solid #ccc;
        }
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background: #FEDE4F;
            opacity: .5;
            border: 1px solid #ccc;
            cursor: move;
        }
        .big {
            display: none;
            position: absolute;
            left: 410px;
            top: 0;
            width: 500px;
            height: 500px;
            background-color: pink;
            z-index: 999;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="preview_img">
    <img src="upload/s3.png" alt="">
    <div class="mask"></div>
    <div class="big">
        <img src="upload/big.jpg" alt="" class="bigImg">
    </div>
</div>

<script>
    var preview_img = document.querySelector('.preview_img');//外面的大盒子
    var mask = document.querySelector('.mask');//黄色阴影盒
    var big = document.querySelector('.big');//最大的盒子

    //1 鼠标移入显示隐藏的2个盒子
    preview_img.addEventListener('mouseover',function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    //2 鼠标松开 隐藏2个盒子
    preview_img.addEventListener('mouseout',function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    });

    //3 鼠标移动的时候 让黄色盒子跟着鼠标走
    preview_img.addEventListener('mousemove',function (e) {
        //3.1 先求出鼠标在盒子内的坐标
        var x = e.pageX - preview_img.offsetLeft;
        var y = e.pageY - preview_img.offsetTop;

        //3.2 把鼠标的坐标 给 遮挡盒子的left 和 top值
        var maskX = x - mask.offsetWidth / 2; //x坐标
        var maskY = y - mask.offsetHeight / 2; //y坐标
        var levelMax = preview_img.offsetWidth - mask.offsetWidth;//遮挡层x轴最大移动距离
        var verticalMax = preview_img.offsetHeight - mask.offsetHeight;//遮挡层y轴最大移动距离

        //3.3 做x和y方向最小最大可移动范围的判断
        // 如果小于0 就等于0 保证移动不出左边
        // 如果大于最大值 就等于最大值 保证移动不出右边
        maskX <= 0 ? maskX = 0 : maskX;
        maskX >= levelMax ? maskX = levelMax : maskX;
        maskY <= 0 ? maskY = 0 : maskY;
        maskY >= verticalMax ? maskY = verticalMax : maskY;
        //3.4 拼接一下 单位px
        mask.style.left = maskX + 'px';
        mask.style.top  = maskY + 'px';

        //3.5 做放大镜效果
        var bigImg = document.querySelector('.bigImg');//拿到大图
        var bigImgMax_x = bigImg.offsetWidth  - big.offsetWidth;//大图x轴的最大移动距离
        var bigImgMax_y = bigImg.offsetHeight - big.offsetHeight;//大图y轴的最大移动距离

        //计算公式：大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        //            bigImgX    =    maskX    *    bigImgMax_x   /   levelMax
        var bigImgX = maskX * bigImgMax_x /  levelMax;//大图x轴移动距离
        var bigImgY = maskY * bigImgMax_x / verticalMax;//大图y轴移动距离

        bigImg.style.left = - bigImgX + 'px';
        bigImg.style.top  = - bigImgY + 'px';
    });
</script>
</body>
</html>

用到的图片

码农公寓

相关文章