JavaScript案例---实现放大镜的效果

柳絮才媛媛

已于 2023-12-04 22:24:27 修改

阅读量186

点赞数 4

分类专栏： HTML+CSS 文章标签： html 前端

于 2023-12-04 22:23:54 首次发布

本文链接：https://blog.csdn.net/2302_77210478/article/details/134795204

版权

HTML+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现的效果如下：

主要的思路为：

1.两个并排盒子，一个放需要放大的图片，另一个盒子放大之后展示的图片。其位置使用的是左右均为 position: absolute，其中右边的利用 left 实现两个盒子并列。小盒子mask 我们同样可以为其设置 position: absolute，调整一下背景颜色即可

2.利用JS 实现小盒子mask随着鼠标移动。首先实现小盒子mask 的位置变化：调用左边盒子的onmousemove函数，传入参数client，表示时间鼠标在左边盒子上移动。我们通过client获取鼠标的位置(clientX，clientY)，然后通过(clientX-leftbox.offsetLeft,clientY-leftbox.offsetTop)可获得鼠标在图像上的相对坐标，通过此值减去盒子S的宽度、高度的一半即可获得盒子mask 在左边盒子中的位置。

let x = client.clientX - small.offsetLeft;
let y = client.clientY - small.offsetTop;
mask.style.left = x - 50 + 'px';
mask.style.top = y - 50 + 'px';

3. 实现放大的效果，左边盒子得到盒子Mask的距离左边盒子的left和top得到需要放大的图片的具体位置。在右边盒子找到相对于的位置，即定位到 background-position ，在实现放大相应的倍数即可。

思考：如何放置放大的盒子不利用背景进行放大，只是放入一张图片，如何结果？

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zoom放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #all{
            padding: 100px;
        }
        #small{
            width: 310px;
            height: 284px;
            position: absolute;
            border: 1px solid black;
        }
        #mask{
            width: 100px;
            height: 100px;
            position: absolute;
            border: 1px solid red;
        }
        #big{
            width: 310px;
            height: 310px;
            left: 450px;
            border: 1px solid yellowgreen;
            position: absolute;
            background-image: url(images/big.png);
            background-repeat: no-repeat;
            background-size: 250% 250%
        }

    </style>
</head>

<body>
<div id = "all">
    <div id="small">
        <div id="mask"></div>
        <img src="/images/small.png"/>
    </div>
    <div id="big">
    </div>
    <script>
        let small = document.getElementById("small");
        let mask = document.getElementById("mask");
        let big = document.getElementById("big");
        small.onmousemove = function (client) {
            let x = client.clientX - small.offsetLeft;
            let y = client.clientY - small.offsetTop;
            mask.style.left = x - 50 + 'px';
            mask.style.top = y - 50 + 'px';
            let dis_x = small.offsetLeft + small.offsetWidth - client.clientX;
            let dis_y = small.offsetTop + small.offsetHeight - client.clientY;

            big.style.backgroundPositionX = (50 - x) * 3 + 'px';
            big.style.backgroundPositionY = (50 - y) * 3 + 'px';

            if (x - 50 < 0) {
                mask.style.left = 0;
                big.style.backgroundPositionX = 0;
            }
            if (dis_x <= 50) {
                mask.style.left = small.offsetWidth - 100 + 'px';
                big.style.backgroundPositionX = (100 - small.offsetWidth) * 3 + 'px';
            }
            if (y - 50 < 0) {
                mask.style.top = 0;
                big.style.backgroundPositionY = 0;
            }
            if (dis_y < 50) {
                mask.style.top = small.offsetHeight - 100 + 'px';
                big.style.backgroundPositionY = (100 - small.offsetHeight) * 3 + 'px';
            }

            mask.style.backgroundColor = "rgba(135, 207, 235, 0.61)";

        }

        small.onmouseout = function () {
            mask.style.backgroundColor="transparent"
        }
    </script>
</div>
</body>
</html>

参考链接：【javaScript案例】之放大镜效果的实现_wait......的博客-CSDN博客