放大镜

最新推荐文章于 2024-10-30 18:24:25 发布

weixin_44878335

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量111

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44878335/article/details/114596105

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

放大镜

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .div1 {
            width: 400px;
            height: 400px;
            margin: 30px 0 0 20px;
            position: relative;
        }

        .mark {
            width: 200px;
            height: 200px;
            position: absolute;
            background: rgba(0, 0, 0, 0.3);
            top: 0;
            left: 0;
            display: none;
        }

        .div1 img {
            width: 400px;
            height: 400px;
        }

        .div2 {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 30px;
            left: 460px;
            overflow: hidden;
            display: none;
        }

        .div2 img {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="div1">
        <img src="1.jpg" alt="">
        <div class="mark"></div>
    </div>
    <div class="div2"><img src="1.jpg" alt=""></div>
</body>
<script>
    //获取操作对象
    var div1 = document.querySelector(".div1")
    var mark = document.querySelector(".mark")
    var div2 = document.querySelector(".div2")
    var rightImg=div2.querySelector("img")
    div1.onmouseover = function () {
        mark.style.display = "block"
        div2.style.display = "block"
    }
    div1.onmousemove = function (e) {
        var e = e || window.event
        var top1 = e.pageY - div1.offsetTop - parseInt(mark.offsetHeight / 2)
        var left1 = e.pageX - div1.offsetLeft - parseInt(mark.offsetWidth / 2)
    
        var maxX = div1.offsetWidth - mark.offsetWidth
        var maxY = div1.offsetHeight - mark.offsetHeight

        //设置右边图片的移动距离
        var rightTop, rightLeft
        //水平方向
        if (left1 <= 0) {
            mark.style.left = 0 + 'px'
            rightLeft = 0
        } else if (left1 >= maxX) {
            mark.style.left = maxX + 'px'
            rightLeft = maxX
        } else {
            mark.style.left = left1 + 'px'
            rightLeft = left1
        }

        //垂直方向
        if (top1 <= 0) {
            mark.style.top = 0 + 'px'
            rightTop = 0
        } else if (top1 >= maxY) {
            mark.style.top = maxY + 'px'
            rightTop = maxY
        } else {
            mark.style.top = top1 + 'px'
            rightTop = top1
        }
        //让右边图片进行移动
        rightImg.style.top = -2 * rightTop + 'px'
        rightImg.style.left = -2 * rightLeft + 'px'
    }
    div1.onmouseout = function () {
        mark.style.display = "none"
        div2.style.display = "none"
    }

</script>