放大镜效果的实现

最新推荐文章于 2024-10-27 11:25:22 发布

每天只会嘻嘻嘻

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量78

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/caiji76531/article/details/141753203

版权

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

        .small {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px;

            position: relative;
        }

        .small img {
            width: 100%;
        }

        .mark {
            width: 100px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.3);

            position: absolute;
            left: 0;
            top: 0;

            /* display: none; */
        }

        .big {
            width: 300px;
            height: 450px;
            overflow: hidden;

            position: absolute;
            left: 410px;
            top: 0;

            /* display: none; */
        }

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

<body>
    <div class="small">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.cGjCuP5ghtV5SuGhFWIqUAHaHa?rs=1&pid=ImgDetMain" alt="">

        <!-- 蒙版 -->
        <div class="mark"></div>

        <!-- 大图 -->
        <div class="big">
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.cGjCuP5ghtV5SuGhFWIqUAHaHa?rs=1&pid=ImgDetMain" alt="" class="bigImg">
        </div>
    </div>

    <script>
        // 获取元素
        var small = document.getElementsByClassName("small")[0];
        var mark = document.getElementsByClassName("mark")[0];
        var big = document.getElementsByClassName("big")[0];
        var bigImg = document.getElementsByClassName("bigImg")[0];



        // 1.鼠标移入小图片，蒙版和放大图片显示
        // small.onmouseenter = function(){
        //     mark.style.display = "block";
        //     big.style.display = "block";
        // }

        // // 2.鼠标移出，隐藏
        // small.onmouseleave = function(){
        //     mark.style.display = "none";
        //     big.style.display = "none";
        // }

        // 3.鼠标移动时，蒙版跟着鼠标走
        small.onmousemove = function (e) {
            // console.log(e.offsetX);
            // offsetX offsetY 有弊端，不能用
            // console.log(e.clientX - small.offsetLeft - small.clientLeft);

            var markX = e.pageX - small.offsetLeft - small.clientLeft - mark.offsetWidth / 2;
            var markY = e.pageY - small.offsetTop - small.clientTop - mark.offsetHeight / 2;

            // 规定蒙版移动范围
            if (markX < 0) {
                markX = 0;
            }
            if (markY < 0) {
                markY = 0;
            }
            if (markX > small.clientWidth - mark.offsetWidth) {
                markX = small.clientWidth - mark.offsetWidth
            }
            if (markY > small.clientHeight - mark.offsetHeight) {
                markY = small.clientHeight - mark.offsetHeight
            }

            // 鼠标需要出现在蒙版中间
            mark.style.left = markX + "px";
            mark.style.top = markY + "px";

            // 放大图片跟蒙版同步
            // 计算比例
            var ratio = big.clientWidth / mark.offsetWidth;
            // 大图的偏移
            var imgX = markX * ratio;
            var imgY = markY * ratio;

            bigImg.style.left = -imgX + "px";
            bigImg.style.top = -imgY + "px";
        }
    </script>
</body>