放大镜案例

放大镜案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
    <div class="small">
        <img src="images/small.webp" width="350" alt=""/>

        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="images/big.jpg" width="800" alt=""/>
    </div>
</div>

<script>
    function my$ (s) {
        return document.getElementById(s);    
    }
    var box = my$('box');
    var smallBox = box.children[0];
    var bigBox = box.children[1];
    var smallImage = smallBox.children[0];
    var mask = smallBox.children[1];
    var bigImage = bigBox.children[0];

    // 1 鼠标经过时候显示mask和bigBox 当鼠标离开的时候隐藏mask和bigbox
    box.onmouseenter = function () {
        // 显示mask和bigbox
        mask.style.display = 'block';
        bigBox.style.display = 'block';
    }
    box.onmouseleave = function () {
        mask.style.display = 'none';
        bigBox.style.display = 'none';
    }

    // 2 当鼠标在盒子中移动的时候 让mask和鼠标一起移动
    box.onmousemove = function (e) {
        e = e || window.event;
        // 获取鼠标在盒子中的位置就是mask的坐标
        var maskX = e.pageX - box.offsetLeft;
        var maskY = e.pageY - box.offsetTop;
        // 让鼠标出现在mask的中心点
        maskX = maskX - mask.offsetWidth / 2;
        maskY = maskY - mask.offsetHeight / 2;
        // 把mask限制到小盒子中
        maskX = maskX < 0 ? 0 : maskX;
        maskY = maskY < 0 ? 0 : maskY;

        maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX;
        maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : maskY;
        

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

        // 3. 当鼠标移动的时候 大图片也跟着一起移动
    // 求大图片移动的距离
    // mask移动的距离 / mask最大能移动的距离 = 大图片移动的距离 / 大盒子最大能移动的距离
    // mask最大能移动的距离
    var maskMax = box.offsetWidth = mask.offsetWidth;
    // 大图片最大能移动的距离
    var bigImageMax = bigImage.offsetWidth - bigBox.offsetWidth;
    var bigImageX = maskX * bigImageMax / maskMax;
    var bigImageY = maskY * bigImageMax / maskMax;

    bigImage.style.left = -bigImageX + 'px';
    bigImage.style.top = -bigImageY + 'px';

    }
</script>
</body>
</html>

 

posted @ 2019-12-11 14:37  ivy_wang  阅读(199)  评论(0)  编辑  收藏  举报