放大镜效果

最新推荐文章于 2025-07-22 15:31:58 发布

原创最新推荐文章于 2025-07-22 15:31:58 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

该代码示例展示了如何在网页上创建一个交互效果：当鼠标移到图片上时，会出现一个黄色的正方形框，该框会跟随鼠标移动并显示出图片被放大的部分，放大比例为2.4倍，显示在图片右侧。效果通过CSS和JavaScript实现，利用鼠标移入、移出及移动事件来调整元素的显示和位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .bigbox {
        width: 200px;
        height: 200px;
        position: relative;
    }

    .bigbox .photo {
        width: 200px;
        height: 200px;
        position: absolute;
    }

    .bigbox .mouse {
        width: 80px;
        height: 80px;
        background-color: yellow;
        position: absolute;
        opacity: 50%;
        display: none;
    }

    .big {
        position: absolute;
        left: 200px;
        top: 0px;
        display: none;
    }

    .big .bigphoto {
        width: 192px;
        height: 192px;
        background: url(./u=64339548\,861794111&fm=253&fmt=auto&app=138&f=JPEG.jpg);
        background-repeat: no-repeat;

        background-position: left top;
    }
</style>

<body>
    <div class="bigbox">
        <img src="./u=64339548,861794111&fm=253&fmt=auto&app=138&f=JPEG.jpg" alt="" class="photo">
        <div class="mouse"></div>

    </div>


    <div class="big">
        <img alt="" class="bigphoto">
    </div>




    <script>
        var bigbox = document.querySelector('.bigbox')
        var photo = document.querySelector('.photo')
        var mouse = document.querySelector('.mouse')
        var bigphoto = document.querySelector('.bigphoto')
        var big = document.querySelector('.big')
        photo.onmouseover = function () {
            mouse.style.display = "block";
            big.style.display = "block";
        }
        photo.onmouseout = function () {
            mouse.style.display = "none"
            big.style.display = "none"
        }
        bigbox.onmousemove = function (evt) {
            bigphoto.style.display = "block"
            mouse.style.left = evt.clientX - 40 + "px"

            mouse.style.top = evt.clientY - 40 + "px"
         
            bigphoto.style.backgroundPositionX = -evt.clientX + 'px'
            bigphoto.style.backgroundPositionY = -evt.clientY + 'px'


        }

    </script>
</body>

</html>

实现原理：
1.如何实现移入变显示黄色块？
首先将其设置为none的形式，
然后获取事件鼠标移入，如果移入的话就将其展示为块，并且鼠标移动事件将其与鼠标距离窗口的距离绑定设置其的定位（相对于bigbox）
2.放大镜部分：
首先将其设置宽高为黄色块的2.4倍，其次将其css定位设置到图片的右边，接着获取鼠标x与y的距离将其给背景图的定位，同时减掉方块的一半的距离使得可以显示的完整
在这里插入图片描述