js - 放大镜案例

最新推荐文章于 2022-10-06 22:43:05 发布

栗同学

最新推荐文章于 2022-10-06 22:43:05 发布

阅读量634

点赞数

分类专栏：案例文章标签： javascript css html

本文链接：https://blog.csdn.net/lizixuan2001/article/details/121939417

版权

案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和JavaScript实现一个网页上的放大镜功能，通过鼠标移动控制图片的缩放和平移，当鼠标悬停在小图上时，大图和放大镜图片会相应变化。关键代码展示了如何处理图片的移动、放大倍率计算和滚动位置更新。

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

<!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>放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            float: left;
            width: 500px;
            height: 600px;
            border: 1px solid black;
            margin: 30px 50px;
            background-color: rgba(105, 105, 105, 0.356);
        }

        #magnifier {
            float: left;
            width: 500px;
            height: 500px;
            border: 1px solid blue;
            margin-top: 30px;
            overflow: hidden;
            display: none;
        }

        #moveBox {
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }

        #moveBox>img {
            width: 100%;
            height: 100%;
        }

        #mb {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.3);
            cursor: move;
            display: none;
        }

        #smallbox {
            margin-top: 20px;
        }

        #smallbox>img {
            width: 62px;
            height: 62px;
            border: 1px solid black;
            margin-left: 60px;
        }

        #magnifier>img {
            width: 1000px;
            height: 1000px;
        }
    </style>
</head>

<body>
    <!-- 左边最大的盒子 -->
    <div class="main">
        <div id="moveBox">
            <img src="./yifu1.jpg" alt="" id="moveBoxBigImg">
            <div id="mb"></div>
        </div>
        <div id="smallbox">
            <img src="./yifu1.jpg" alt="">
            <img src="./yifu2.jpg" alt="">
            <img src="./yifu3.jpg" alt="">
        </div>
    </div>
    <!-- 右边放大镜盒子 -->
    <div id="magnifier">
        <img src="./yifu1.jpg" alt="" id="magnifierImg">
    </div>
</body>
<script>
    /*
    1、静态页面搭建
    2、获取元素
    3、鼠标移入小图，移动盒子的图片和放大镜盒子图片都要对应
    4、鼠标移入移动盒子中，蒙版显示、放大镜显示
    5、给移动盒子绑定鼠标移动事件，蒙版随之移动，且不能超出父元素分范围
    6、求倍数
    7、求卷去的距离
    */
    var moveBoxBigImg = document.getElementById("moveBoxBigImg");
    var magnifierImg = document.getElementById("magnifierImg");
    var smallImgArr = document.getElementById("smallbox").getElementsByTagName("img");
    var moveBox = document.getElementById("moveBox");
    var magnifier = document.getElementById("magnifier");
    var mb = document.getElementById("mb");
    /* 
       重点：让放大镜盒子的scrollLeft和scrollTop发生变化
       原理：右侧放大镜盒子中的图片比左侧盒子中的图片发生变化
       scrollLeft = 宽度的放大倍数*蒙版距离父元素的左侧距离
       scrollTop = 高度的放大倍数*蒙版距离父元素的上侧距离
    */
    //3、
    for (var i = 0; i < smallImgArr.length; i++) {
        smallImgArr[i].onmouseover = function () {
            moveBoxBigImg.src = this.src;
            magnifierImg.src = this.src;
        }
    }
    // 4、
    moveBox.onmouseover = function () {
        magnifier.style.display = "block";
        mb.style.display = "block";
    }
    moveBox.onmouseout = function () {
        magnifier.style.display = "none";
        mb.style.display = "none";
    }
    // 5、
    moveBox.onmousemove = function () {
        var event = event || window.event;
        var leftObj = event.clientX - moveBox.offsetLeft - moveBox.clientLeft - mb.clientWidth / 2;
        var topObj = event.clientY - moveBox.offsetTop - moveBox.clientTop - mb.clientHeight / 2;
        var leftMax = moveBox.clientWidth - mb.clientWidth;
        var topMax = moveBox.clientHeight - mb.clientHeight;
        if (leftObj >= leftMax) {
            leftObj = leftMax;
        }
        if (leftObj <= 0) {
            leftObj = 0;
        }
        if (topObj >= topMax) {
            topObj = topMax;
        }
        if (topObj <= 0) {
            topObj = 0;
        }
        mb.style.left = leftObj + "px";
        mb.style.top = topObj + "px";
        // 6
        timesWidth = magnifierImg.clientWidth / moveBoxBigImg.clientWidth;
        timesHeight = magnifierImg.clientHeight / moveBoxBigImg.clientHeight;
        // 7、
        magnifier.scrollLeft = timesWidth * leftObj;
        magnifier.scrollTop = timesHeight * topObj;
    }
</script>

</html>