js 实现放大镜 (附完整代码)

最新推荐文章于 2023-11-05 19:57:08 发布

你康哥

最新推荐文章于 2023-11-05 19:57:08 发布

阅读量3.3k

点赞数 4

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_52501846/article/details/124337905

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .box {
            width: 400px;
            height: 400px;
            margin: 100px 0 0 100px;
        }

        .content {
            width: 400px;
            height: 400px;
            position: relative;
            border: 1px solid #ccc;
        }

        .content>img {
            width: 400px;
            height: 400px;
        }

        .mask {
            width: 300px;
            height: 300px;
            background-color: yellow;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #ccc;
            display: none;
        }

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

        .big>img {
            width: 800px;
            height: 800px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <img src="./2ed149a56d12c2d8.jpg" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="./2ed149a56d12c2d8.jpg" alt="">
            </div>
        </div>

    </div>
    <script>
        var content = document.querySelector('.content')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    content.addEventListener('mouseenter', function () {
        mask.style.display = 'block'
        big.style.display = 'block'
    })
    content.addEventListener('mouseleave', function () {
        console.log(1111);
        mask.style.display = 'none'
        big.style.display = 'none'
    })
    content.addEventListener('mousemove', function (e) {
        var x = e.pageX - content.offsetLeft
        var y = e.pageY - content.offsetTop
        var maskX = x - mask.offsetWidth / 2
        var maskY = y - mask.offsetHeight / 2

        console.log(mask.offsetWidth, content.offsetWidth);
        var XMAX = content.offsetWidth - mask.offsetWidth
        var YMAX = content.offsetHeight - mask.offsetHeight
        console.log(maskX, maskY, XMAX);
        if (maskX <= 0) {
            maskX = 0
        } else if (maskX >= XMAX) {
            maskX = XMAX
        }
        if (maskY <= 0) {
            maskY = 0
        } else if (maskY >= YMAX) {
            maskY = YMAX
        }
        mask.style.left = maskX + 'px'
        mask.style.top = maskY + 'px'
        var img = document.querySelector('.big>img')
        imgXMax = img.offsetWidth - big.offsetWidth
        imgYMax = img.offsetHeight - big.offsetHeight
        img.style.left = -maskX * imgXMax / XMAX + 'px'
        img.style.top = -maskY * imgYMax / YMAX + 'px'
    })
    </script>
    <!-- <script src="./放大镜.js"></script> -->
</body>

</html>

你康哥

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
js 实现放大镜 (附完整代码)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫