简易放大镜实现原理

.mini {
     border: 1px solid #ccc;
     position: relative;
     float: left;
     /* 背景填充为填满 */
     background-size: 100% 100%;
 }
 .max{
     border:1px solid #ccc;
     /* position: relative; */
     float: left;
     /* display: none; */
 }
 .mask{
     background-color: rgba(200,186,50,0.3);
     position: absolute;
     /* display: none; */
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

分为三个盒子：min小盒子，mask遮罩层，max大图盒子。
根据图片大width和height来完成三个盒子的大小
确定第一个比例：原图和max的比例；（width，height）
这个图片就是这里的盒子的背景图片。

加载图片给成背景和生成盒子比例；

给小图添加鼠标事件

 mini.addEventListener("mouseenter",mouseHandler);
1

鼠标进入之后会有这个事件发生，记录鼠标移动的位置坐标。
mousemove事件，鼠标移动事件。

e.clientX

var x = e.clientX-rect.x-mask.offsetWidth/2;
var y = e.clientY-rect.y-mask.offsetHeight/2;
1
2

完整代码描述

<!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>
        .mini {
            border: 1px solid #ccc;
            position: relative;
            float: left;
            /* 背景填充为填满 */
            background-size: 100% 100%;
        }
        .max{
            border:1px solid #ccc;
            /* position: relative; */
            float: left;
            /* display: none; */
        }
        .mask{
            background-color: rgba(200,186,50,0.3);
            position: absolute;
            /* display: none; */
        }
    </style>
</head>

<body>
    <div class="mini">
        <div class="mask"></div>
    </div>
    <div class="max"></div>
    <script>
        // SCALE 原图和max的比例
        // ZOOM_SCALE max和mini的比例
        // BN_WIDTH 轮播图左右按钮的宽度
        // ICON_WIDTH 轮播图中每个图片的宽度
        // MARGIN 轮播图距离左右按钮间距
        const SCALE = 1.4814814814814814,ZOOM_SCALE = 1.2
        init();
        var mini,mask,max;

        function init() {
            mini = document.querySelector(".mini");
            mask = document.querySelector(".mask");
            max = document.querySelector(".max");
            /* 图片加载 */
            loadImage("./img/10-.jpg")
            /* 给小图添加鼠标事件 */
            mini.addEventListener("mouseenter",mouseHandler);
        }

        function loadImage(src) {
            var img = new Image();
            img.src = src;
            img.addEventListener("load", loadHandler);
        }

        function loadHandler(e) {
            /* 这里就可以知道图片的大小 */
            console.log(this.width, this.height);
            /* 设置mini宽高 */
            Object.assign(mini.style,{
                width:this.width/SCALE/ZOOM_SCALE+"px",
                height:this.height/SCALE/ZOOM_SCALE+"px",
            })
            /* 设置max宽高 */
            Object.assign(max.style,{
                width:this.width/SCALE+"px",
                height:this.height/SCALE+"px",
            })
            /* 设置mask的宽高 */
            Object.assign(mask.style,{
                width:this.width/SCALE/ZOOM_SCALE/SCALE+"px",
                height:this.height/SCALE/ZOOM_SCALE/SCALE+"px",
            })

            /* 给mini和max设置背景图 */
            max.style.backgroundImage=mini.style.backgroundImage = `url(${this.src})`

        }
        function mouseHandler(e){
            if(e.type === "mouseenter"){
                console.log("我进来拉");
                mini.addEventListener("mousemove",mouseHandler);
                mini.addEventListener("mouseleave",mouseHandler)
            }else if(e.type === "mouseleave"){
                console.log("我又出去拉");
                mini.removeEventListener("mousemove",mouseHandler);
                mini.removeEventListener("mouseleave",mouseHandler);
            }else{
                /* 鼠标移动的位置 */
                var rect = mini.getBoundingClientRect();
                console.log(e.clientX,e.clientY);
                /* 给mask移动起来 */
                /*移动的位置= 鼠标位置-父容器距离左边的距离-子容器自身的一半 */
                var x = e.clientX-rect.x-mask.offsetWidth/2;
                var y = e.clientY-rect.y-mask.offsetHeight/2;

                if(x<0) x=0
                else if(x>rect.width-mask.offsetWidth) x= rect.width-mask.offsetWidth;
                if(y<0) y=0
                else if(y>rect.height-mask.offsetHeight) y= rect.height-mask.offsetHeight;
                Object.assign(mask.style,{
                    left:x +"px",
                    top:y +"px",
                })
                Object.assign(max.style,{
                    backgroundPositionX:-x*(SCALE*ZOOM_SCALE)+"px",
                    backgroundPositionY:-y*(SCALE*ZOOM_SCALE)+"px",
                })
            }
        }
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

相关阅读:
微信小程序入门级
 MySQL数据库之用户管理
 Linux学习记录——이십구 网络基础（2）
OOALV总结
 linux redis自启动
 Jenkins项目中有中文文件出错处理
 【计算机网络】HTTPS协议的加密流程
 hystrix断路器
 salesforce零基础学习（一百三十九）Admin篇之Begins/Contains/Starts With 是否区分大小写
 代码随想录-算法训练营day55【动态规划16：两个字符串的删除操作、编辑距离、编辑距离总结篇】
原文地址：https://blog.csdn.net/m0_46672781/article/details/126330126