当前位置：首页 > news >正文

放大镜效果

news 来源：原创 2025/5/8 6:34:18

题九：放大镜效果

要求：
1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形框会随着鼠标的移动而移动；
2.将黄色正方形框里的内容的长和宽均放大2.4倍，并在图片右边进行显示。

原理：

首先把要放大的图片先size*2.4倍，位置要从零开始，绑定事件mousemove一定不要写错。
定位鼠标在视口的位置，在减去图片离视口的位置，就是鼠标在图片中的位置，高度的话还要减去滚动卷去的高度。
最后在图片的范围内，实现放大效果（加-才能网正方向去）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con {
            width: 100%;
            height: 1000px;
         }
        .small {
            width: 400px;
            height: 400px;
            background-image: url(./任务/交互图片/9.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            border: 1px solid black;
            display: inline-block;
        }
        .big {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: inline-block;
            background-image: url(./任务/交互图片/9.jpg);
            background-repeat: no-repeat;
            background-size: 960px ,960px;
            background-position: 0,0;
        }
     
    </style>
</head>
<body>
    <div class="con">
        <div class="small">
            <div class="black"></div>
        </div>
        <div class="big"></div>
    </div>
    <script>
       

        const small = document.querySelector('.small');
        const big = document.querySelector('.big');

        small.addEventListener('mousemove', function (e) {
            const rect = small.getBoundingClientRect();
            let x = e.pageX - rect.left;
            let y = e.pageY - rect.top - document.documentElement.scrollTop;

            if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
              
                big.style.backgroundPositionX = -x * 2.4 + 'px';
                big.style.backgroundPositionY = -y * 2.4 + 'px';
            }
        });
    </script>
</body>
</html>

视频：

放大镜效果