放大镜效果

BBsix666

已于 2023-01-18 13:08:48 修改

阅读量73

点赞数

文章标签： javascript css 前端

于 2023-01-18 05:02:49 首次发布

本文链接：https://blog.csdn.net/BBsix666/article/details/128722602

版权

该文章描述了一个使用HTML、CSS和JavaScript实现的图片预览功能。当鼠标移到小图片上时，会出现一个黄色半透明的矩形框，该框会跟随鼠标移动并按比例放大显示对应部分的图片。大图片在页面右侧展示，通过计算鼠标位置和比例来调整大图的显示区域。

摘要由CSDN通过智能技术生成

放大镜

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

原理

一张小图片，一张大图片，通过获取鼠标距离box左上角的距离来获取相应的大图片的width和height，同时溢出隐藏实现放大效果

<!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>
    <style>
        .box {
            position: relative;
            width: 350px;
            height: 350px;
        }

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

        .small {
            height: 400px;
            width: 400px;

        }

        .big {
            position: absolute;
            left: 360px;
            top: 0px;
            width: 600px;
            height: 600px;
            overflow: hidden;
            display: none;
        }

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

</head>

<body>
    <div class="box" id="box">
        <img src="https://icweiliimg1.pstatp.com/weili/bl/260506113224737018.jpg" alt="" class="small">
        <div class="finger" id="finger"></div>
        <div class="big" id="big">
            <img src="https://icweiliimg1.pstatp.com/weili/bl/260506113224737018.jpg" alt="" class="bigg">
        </div>
    </div>
    <script>
        window.addEventListener('load', function () {
            var box = document.querySelector('.box')
            var finger = document.querySelector('.finger')
            var big = document.querySelector('.big')
            var bigg = document.querySelector('.bigg')

            box.addEventListener('mouseover', function () {
                finger.style.display = 'block';
                big.style.display = "block"
            })
            box.addEventListener('mouseout', function () {
                finger.style.display = 'none';
                big.style.display = 'none';
            })
            box.addEventListener('mousemove', function (e){
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            
            var fingerX = x - finger.offsetWidth / 2;
            var fingerY = y - finger.offsetHeight / 2
            var maxWidth = box.offsetWidth - finger.offsetWidth;
            var maxHeight = box.offsetHeight - finger.offsetHeight;

            if (fingerX <= 0) {
                fingerX = 0;
            } else if (fingerX >= maxWidth) {
                fingerX = maxWidth;
            }
 
            if (fingerY <= 0) {
                fingerY = 0;
            } else if (fingerY >= maxHeight) {
                fingerY = maxHeight;
            }
            finger.style.left = fingerX + 'px';
            finger.style.top = fingerY + 'px';
            var boxWidth = box.offsetWidth - big.offsetWidth;
            var boxHeight = box.offsetHeight - big.offsetHeight;
 
            var bigX = fingerX * boxWidth / maxWidth;
            var bigY = fingerY * boxHeight / maxHeight;
 

            bigg.style.left = (-bigX) + 'px';
            bigg.style.top = (-bigY) + 'px';


        })

        })

    </script>
</body>

</html>