京东商品放大镜

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            position: relative;
        }
        
        .small_box {
            background: darkorchid;
            width: 300px;
            height: 250px;
            border: 1px solid gainsboro;
            position: relative;
        }
        
        .small {
            width: 300px;
            height: 250px;
        }
        
        .layer {
            background: darkorange;
            opacity: .5;
            width: 150px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        
        .big_box {
            width: 400px;
            height: 300px;
            border: gainsboro 1px solid;
            background: greenyellow;
            position: absolute;
            top: 0;
            left: 300px;
            display: none;
            overflow: hidden;
        }
        
        .big {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="small_box">
            <img src="../../../imgs/4.png" class="small">
            <div class="layer"></div>
        </div>

        <div class="big_box">
            <img src="../../../imgs/4.png" class="big">
        </div>
    </div>
    <script>
        var box = document.getElementById('box');
        var small_box = document.querySelector('.small_box');
        var small = document.querySelector('.small');
        var layer = document.querySelector('.layer');
        var big_box = document.querySelector('.big_box');
        var big = document.querySelector('.big');
        small_box.addEventListener('mouseover', function() {
            layer.style.display = 'block';
            big_box.style.display = 'block';
            layer.style.cursor = 'move';
        })
        small_box.addEventListener('mouseout', function(e) {
            layer.style.display = 'none';
            big_box.style.display = 'none';
        })
        layer.addEventListener('mousemove', function(e) {
            //获得鼠标位置
            var layerX = e.pageX - layer.offsetWidth / 2;
            var layerY = e.pageY - layer.offsetHeight / 2;
            //限制遮盖层X轴的移动位置
            layerX = layerX < 0 ? layerX = 0 : layerX;
            var maxX = small.offsetWidth - layer.offsetWidth;
            layerX = layerX > maxX ? layerX = maxX : layerX;
            //限制遮盖层Y轴的移动位置
            layerY = layerY < 0 ? layerY = 0 : layerY;
            var maxY = small.offsetHeight - layer.offsetHeight;
            layerY = layerY > maxY ? layerY = 100 : layerY;
            //赋值给layer的 top 和 left
            layer.style.left = layerX + 'px';
            layer.style.top = layerY + 'px';

            // 遮挡层移动距离 layerX 和 layerY
            // 遮挡层的最大移动距离 maxX 和 maxY
            // 大图片最大移动距离 bigMaxX 和 bigMaxY
            var bigMaxX = big.offsetWidth - big_box.offsetWidth;
            var bigMaxY = big.offsetHeight - big_box.offsetHeight;
            // 大图的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
            var bigX = layerX * bigMaxX / maxX;
            var bigY = layerY * bigMaxY / maxY;
            big.style.left = -bigX + 'px';//因为是反方向移动，所以是 负值
            big.style.top = -bigY + 'px';
        })
    </script>
</body>

</html>
猜你喜欢
