[JavaScript知识库] JavaScript - WebAPI - 事件对象 - 案例

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript - WebAPI - 事件对象 - 案例 - 放大镜 -> 正文阅读

[JavaScript知识库]JavaScript - WebAPI - 事件对象 - 案例 - 放大镜

在这里插入图片描述

需求分析

1.小图片鼠标移入时:出现遮罩层，并将遮罩部分放大在右边显示
2.小图片鼠标移动时：遮罩层与大图片相应移动
- 2.1：鼠标在遮罩层中心位置
- 2.2：遮罩层边界检测，遮罩层不能超出图片范围
- 2.3：遮罩层与大图片相应移动假如遮罩层大小50px 50px 大图片100px 100px,那么每当遮罩层鼠标移动1px，大图片应该移动2px。（100/50）
3.小图片鼠标移出时：遮罩层与大图片隐藏

<!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;
            }

            .box {
                width: 350px;
                height: 350px;
                margin: 100px;
                border: 1px solid #ccc;
                position: relative;
            }

            .big {
                width: 400px;
                height: 400px;
                position: absolute;
                top: 0;
                left: 360px;
                border: 1px solid #ccc;
                overflow: hidden;
                display: none;
            }

            .mask {
                width: 175px;
                height: 175px;
                background: rgba(255, 255, 0, 0.4);
                position: absolute;
                top: 0;
                left: 0;
                cursor: move;
                display: none;
            }

            .small {
                position: relative;
            }

            .box img {
                vertical-align: top;
            }

            #bigBox > img {
                /*是让里面的图片脱标，为的就是让里面的图片进行一个移动*/
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <div class="small">
                <img src="images/001.jpg" width="350" alt="" />

                <div class="mask"></div>
            </div>
            <div class="big" id="bigBox">
                <img id="bigImg" src="images/0001.jpg" width="800" alt="" />
            </div>
        </div>
    </body>
    <script>
        // 需求1: 鼠标移入小盒子(大盒子),遮罩显示, bigBox显示(移出隐藏)

        // 1. 获取相关元素: box\small\mask\bigBox\bigImg
        const box = document.querySelector("#box");
        const small = box.firstElementChild;
        const mask = small.lastElementChild;
        const bigBox = box.lastElementChild;
        const bigImg = bigBox.firstElementChild;

        console.log(box, small, mask, bigBox, bigImg);

        // 2. 给box||small做鼠标移入移出事件

        small.onmouseover = function (e) {
            e = e || window.event;

            bigBox.style.display = "block";
            mask.style.display = "block";
        };

        small.onmouseout = function (e) {
            e = e || window.event;

            bigBox.style.display = "";
            mask.style.display = "";
        };

        // 需求2: 鼠标在小盒子small里面移动: 遮罩跟着移动, 大图反向移动

        small.onmousemove = function (e) {
            e = e || window.event;

            // 1. 拿到鼠标的位置: e.pageX e.pageY
            let x = e.pageX;
            let y = e.pageY;

            console.log(x, y);

            // 2. 求出鼠标在小盒子的相对位置: - 大盒子box的定位偏移
            x -= box.offsetLeft;
            y -= box.offsetTop;

            // 3. 让鼠标落在遮罩的中间: -遮罩宽高的一半
            x -= mask.offsetWidth / 2;
            y -= mask.offsetHeight / 2;

            // 4. 判定遮罩的移动范围
            // 4.1 不能小于0: 左边和上边会出去
            if (x < 0) x = 0;
            if (y < 0) y = 0;

            // 4.2 不能大于(small盒子 - 遮罩)
            let maxX = small.offsetWidth - mask.offsetWidth;
            let maxY = small.offsetHeight - mask.offsetHeight;

            if (x > maxX) x = maxX;
            if (y > maxY) y = maxY;
            // 5. 修改遮罩的偏移: left和top属性
            mask.style.left = x + "px";
            mask.style.top = y + "px";

            // 6. 移动大图: 遮罩移动的距离 * (移动距离比例)
            //  (bigImg.offsetWidth - bigBox.offsetWidth) 大图的移动距离
            // 求出比例
            let xc = (bigImg.offsetWidth - bigBox.offsetWidth) / maxX;
            let yc = (bigImg.offsetHeight - bigBox.offsetHeight) / maxY;

            // 移动大图
            bigImg.style.left = -x * xc + "px";
            bigImg.style.top = -y * yc + "px";
        };
    </script>
</html>