前端学习笔记day14 放大镜

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 400px;
            height: 400px;
            margin-left: 60px;
            margin-top: 100px;
            position: relative;

        }
        #small {
            width: 100%;
            height: 100%;
            position: relative;
        }
        #small img {
            position: absolute;
        }
        #mask {
            width: 140px;
            height: 140px;
            position: absolute;
            background: rgba(230,230,45,0.58);
            display: none;
        }
        #big {
            position: absolute;
            left: 410px;
            top: 0px;
            width: 400px;
            height: 400px;
            display: none;
            overflow: hidden;
        }
        #big img {
            width: 800px;
            height: 800px;
            display: block;
            position: absolute;
        }
        }
    </style>
</head>
<body>
    <div id='box'>
        <div id='small'>
            <img src="images/small.webp">
            <div id='mask'></div>
        </div>
        <div id='big'>
            <img src="images/big.jpg" id='pic'>
        </div>
    </div>

    <script>
        var box = document.getElementById('box');
        var mask = document.getElementById('mask');
        var big = document.getElementById('big');
        var pic = document.getElementById('pic');
        box.onmouseover = function() {
            mask.style.display = 'block';
            big.style.display = 'block'
        }
        box.onmousemove = function(e) {
            var maskX = e.pageX - box.offsetLeft -70;
            var maskY = e.pageY - box.offsetTop -70;
            maskX = (maskX < 0) ? 0 : maskX;
            maskX = (maskX > box.offsetWidth - mask.offsetWidth) ? (box.offsetWidth - mask.offsetWidth) : maskX;
            maskY = (maskY < 0) ? 0 : maskY;
            maskY = (maskY > box.offsetWidth - mask.offsetWidth) ? (box.offsetWidth - mask.offsetWidth) : maskY;
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

            var maxMask = box.offsetWidth - mask.offsetWidth;
            var maxBig =  pic.offsetWidth - box.offsetWidth;
            var x = maskX / maxMask * maxBig;
            var y = maskY / maxMask * maxBig;
            pic.style.left = -x + 'px';
            pic.style.top = -y + 'px';


        }
        box.onmouseout = function() {
            mask.style.display = 'none';
            big.style.display = 'none'
        }
    </script>
</body>
</html>
运行结果:
前端学习笔记day14 放大镜

猜你喜欢
