JS复习（放大镜小项目）

最新推荐文章于 2025-05-06 17:28:46 发布

m0_57221025

最新推荐文章于 2025-05-06 17:28:46 发布

阅读量77

点赞数

文章标签： html css html5

本文链接：https://blog.youkuaiyun.com/m0_57221025/article/details/120257591

版权

JavaScript CSS HTML 交互设计图片预览

关键词由优快云通过智能技术生成

这段代码展示了如何创建一个交互式的图片预览系统。当鼠标悬停在缩略图上时，会出现一个半透明的遮罩，并显示大图。用户可以移动鼠标来改变大图的显示区域，实现类似放大镜的效果。主要涉及到HTML、CSS和JavaScript技术，包括事件监听、元素定位和动态调整元素样式等操作。

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

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

        #miniBox {
            height: 200px;
            width: 400px;
            border: 1px solid #000;
            position: relative;
            margin-left: 50px;
        }

        #miniBox img {
            width: 400px;
            height: 100%;

        }

        .mask {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: yellow;
            opacity: 0.4;
            position: absolute;
            left: 0;
            top: 0;
            display: none;

        }

        #bigBox {
            height: 300px;
            width: 600px;
            border: 1px solid #000;
            position: absolute;
            top: 0;
            left: 550px;
            overflow: hidden;
            display: none;
        }

        .bigimg {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="miniBox">
        <img src="./img/11.jpg" alt="">
        <div class="mask"></div>
    </div>

    <div id="bigBox">
        <img src="./img/11.jpg" class="bigimg" alt="">
    </div>



</body>
<script>
    var miniBox = document.getElementById("miniBox")
    var bigBox = document.getElementById("bigBox")
    var mask = miniBox.getElementsByClassName("mask")[0]

    miniBox.addEventListener("mouseover", function (e) {
        mask.style.display = "block"
        bigBox.style.display = "block"
    })
    miniBox.addEventListener("mouseout", function (e) {
        mask.style.display = "none"
        bigBox.style.display = "none"
    })

    miniBox.addEventListener("mousemove", function (e) {

        //鼠标在minibox中的位置；pageX是鼠标在屏幕中的位置；
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        console.log(mouseX, mouseY)
        //鼠标在minibox移动的位置X轴
        var moveX = mouseX - mask.offsetWidth / 2
        //mask的X移动距离
        var moveMaxX = miniBox.offsetWidth - mask.offsetWidth
        if (moveX <= 0) {
            moveX = 0
        } else if (
            moveX >= moveMaxX
        ) {
            moveX = moveMaxX
        }
        //鼠标在minibox移动的位置Y轴
        var moveY = mouseY - mask.offsetHeight / 2
        //mask的最大Y移动距离
        var moveMaxY = miniBox.offsetHeight - mask.offsetHeight

        if (moveY <= 0) {
            moveY = 0
        } else if (
            moveY >= moveMaxY
        ) {
            moveY = moveMaxY
        }
        //mask的移动位置
        mask.style.left = moveX + "px"
        mask.style.top = moveY + "px"

        var bigImg = document.querySelector(".bigimg")//大图
        //大图片最大移动距离
        var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth
        //大图片移动距离xy
        var bigX = moveX * bigImgMax / moveMaxX
        var bigY = moveY * bigImgMax / moveMaxY
        //移动
        bigImg.style.left = -bigX + "px"
        bigImg.style.top = -bigY + "px"
    })


</script>

</html>