放大镜

案例图片

案例代码

		* {
            padding: 0;
            margin: 0;
        }

        .box {
            position: relative;
            width: 1200px;
            margin: 100px auto;
        }

        .small_box {
            width: 450px;
            height: 450px;
            border: 1px solid #000;
            cursor: move;
        }

        .max_box {
            position: absolute;
            display: none;
            top: 0px;
            left: 452px;
            width: 540px;
            height: 540px;
            background-color: #ccc;
            border: 1px solid #000;
            overflow: hidden;
        }

        .mask {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background: rgba(0, 0, 0, .2);
        }

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

	<div class="box">
        <div class="small_box">
            <img src="img/small.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="max_box">
            <img src="img/big.jpg" alt="" class="big_img">
        </div>
    </div>

		// 获取元素
        var box = document.querySelector('.box')
        var min_box = document.querySelector('.small_box');
        var mask = document.querySelector('.mask');
        var max_box = document.querySelector('.max_box');
        var max_img = max_box.querySelector('img');

        // 鼠标移入min_box 显示出mask、max_box
        min_box.addEventListener('mouseover', function (e) {
            mask.style.display = 'block';
            max_box.style.display = 'block';
        })

        // 鼠标移出min_box 隐藏mask、max_box
        min_box.addEventListener('mouseout', function () {
            mask.style.display = '';
            max_box.style.display = '';
        })

        min_box.addEventListener('mousemove', function (e) {
            // 获取鼠标在盒子里的坐标
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            // console.log(x, y);

            // 让mask 跟着鼠标移动
            var maskY = y - mask.offsetHeight / 2;
            var maskX = x - mask.offsetWidth / 2;

            // mask 移动范围
            var maskX_max = min_box.offsetWidth - mask.offsetWidth;
            var maskY_max = min_box.offsetHeight - mask.offsetHeight;

            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskX_max) {
                maskX = maskX_max;
            }

            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskY_max) {
                maskY = maskY_max;
            }

            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

            // 大图片跟着移动
            var max_imgX = max_img.offsetWidth - max_box.offsetWidth;
            var max_imgY = max_img.offsetHeight - max_box.offsetHeight;

            // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
            max_img.style.left = -maskX * max_imgX / maskX_max + 'px';
            max_img.style.top = -maskY * max_imgY / maskY_max + 'px';
        })

案例图片