JavaScript - WebAPI - 事件对象 - 案例 - 放大镜

最新推荐文章于 2022-05-25 19:40:55 发布

Henry_ww

最新推荐文章于 2022-05-25 19:40:55 发布

阅读量115

点赞数

分类专栏：案例文章标签：定位

本文链接：https://blog.csdn.net/Henry_ID/article/details/119705619

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

在这里插入图片描述

需求分析

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>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - 事件对象 - 案例 - 放大镜

需求分析1.小图片鼠标移入时:出现遮罩层，并将遮罩部分放大在右边显示2.小图片鼠标移动时：遮罩层与大图片相应移动2.1：鼠标在遮罩层中心位置2.2：遮罩层边界检测，遮罩层不能超出图片范围2.3：遮罩层与大图片相应移动假如遮罩层大小50px 50px 大图片100px 100px,那么每当遮罩层鼠标移动1px，大图片应该移动2px。（100/50）3.小图片鼠标移出时：遮罩层与大图片隐藏<!DOCTYPE html><html lang="en"> .
复制链接

扫一扫