图片的放大

最新推荐文章于 2024-10-18 11:12:30 发布

编小怪

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量140

点赞数 7

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_73945321/article/details/136918046

版权

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

<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="img/favicon.ico" type="img/x-ico" />
    <title>Image Magnifying Glass</title>
    <!-- 放大镜的原理: 左边图片100%显示，右边图片200%显示并定位，定义两个图片框，将图片放入，图片超出相框部分隐藏，移动滑块，根据滑块的位置，计算出右边图片的定位，从而形成映射效果，即图片放大镜 -->
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }
        img {
            /* display: block; */
        }
        .leftcon {
            width: 350px;
            height: 350px;
            margin: 100px 20px 0px 312px;
            float: left;
            position: relative;
            box-shadow: 3px 3px 10px 0 #111111;
            -webkit-box-shadow: 3px 3px 10px 0 #111111;
            -moz-box-shadow: 3px 3px 10px 0 #111111;
        }
        .leftcon img {
            width: 100%;
            height: 100%;
        }
        .leftcon .slide_box {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 175px;
            height: 175px;
            background: #000;
            opacity: 0.3;
            cursor: move;
        }
        .rightcon {
            display: none;
            width: 350px;
            height: 350px;
            margin-top: 100px;
            float: left;
            overflow: hidden;
            position: relative;
        }
        
        .rightcon img {
            width: 200%;
            height: 200%;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="leftcon" id="left">
        <img src="Pictures\p1.webp" />
        <div class="slide_box" id="box"></div>
    </div>
    <div class="rightcon" id="right">
        <img src="Pictures\p1.webp" />
    </div>
</body>
<script>
    var leftone = document.getElementById("left");
    var rightone = document.getElementById("right");
    var box = document.getElementById("box");
    var rimg = rightone.getElementsByTagName("img")[0];
    function getPosition(e) {
        var e = e || window.event;
        var top = e.clientY - leftone.offsetTop - box.offsetHeight / 2;
        var left = e.clientX - leftone.offsetLeft - box.offsetWidth / 2;
        var maxtop = leftone.offsetHeight - box.offsetHeight; //获取小滑块最大纵向移动距离
        var maxleft = leftone.offsetWidth - box.offsetWidth; //获取小滑块最大横向移动距离
        var mintop = 0; //获取小滑块最小纵向移动距离
        var minleft = 0; //获取小滑块最大纵向移动距离
        var mvtop; //定义小滑块的纵向移动距离
        var mvleft; //定义小滑块的横向移动距离
        if (top < mintop) {
            box.style.top = mintop + "px";
            mvtop = mintop;
        } else if (top > maxtop) {
            box.style.top = maxtop + "px";
            mvtop = maxtop;
        } else {
            box.style.top = top + "px";
            mvtop = top;
        }
        if (left < minleft) {
            box.style.left = minleft + "px";
            mvleft = minleft;
        } else if (left > maxleft) {
            box.style.left = maxleft + "px";
            mvleft = maxleft;
        } else {
            box.style.left = left + "px";
            mvleft = left;
        }
        rimg.style.top = -mvtop * 2 + "px";
        rimg.style.left = -mvleft * 2 + "px";
    }
    leftone.onmousemove = function(e) {
        var e = e || window.event; //判断事件源
        box.style.display = "block";
        getPosition(e);
        rightone.style.display = "block";
    };
    leftone.onmouseleave = function(e) {
        var e = e || window.event; //判断事件源
        box.style.display = "none";
        rightone.style.display = "none";
    };
</script>
</html>