css3加js实现放大镜效果

参考：震撼！CSS3+JS放大镜模式竟然能完美实现
参考文章中介绍了原理，我这里稍微改变了一下

<html>
    <body>
        <div class="bruce">
            <div class="magnifier">div>
        div>
        
    body>
    <script>
        let magnifier=document.querySelector(".magnifier");
        let isshow = false;
        magnifier.addEventListener("click",e=>{
            const fz = window.getComputedStyle(magnifier, '::before').getPropertyValue('--sizew');
            if(isshow){
                e.target.style.setProperty("--x",`0`); 
                e.target.style.setProperty("--y",`0`); 
            }else{
                e.target.style.setProperty("--x",`${e.offsetX}px`); 
                e.target.style.setProperty("--y",`${e.offsetY}px`); 
            }
            isshow = !isshow;
        });
    script>
    <style>
        :root{
            --ratio: 1.5;
            --box-w: 100vw;
            --box-h: 80vh;
            --outbox-w: calc(var(--box-w) * var(--ratio));
            --outbox-h: calc(var(--box-h) * var(--ratio));
        }
        /* .bruce{
            margin-top: 50px;
        } */
        .magnifier{
            --x:0;
            --y:0;
            overflow: hidden;
            position: relative;
            width: var(--box-w);
            height: var(--box-h);
            background: url("a.jfif") no-repeat center/100% 100%;
            /* cursor: grabbing; */
        }
        .magnifier::before{
            --sizew: 0;
            --sizeh: 0;
            --scale-x: calc(var(--sizew) / var(--ratio) - var(--ratio) * var(--x));
            --scale-y: calc(var(--sizeh) / var(--ratio) - var(--ratio) * var(--y));
            position: absolute;
            left: var(--x);
            top: var(--y);
            /* border-radius: 100%; */
            border-radius: 5%;
            width: var(--sizew);
            height: var(--sizeh);
            background: #333 url("a.jfif") no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h);
            /* box-shadow: 1px 1px 3px rgba(0,0,0,.5); */
            content: "";
            will-change: left,top;
            transform: translate(-60%,-70%);
        }
        .magnifier:hover::before{
            --sizew: 500px;
            --sizeh: 650px;
        }
    style>
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

相关阅读:
NtyCo纯C协程的原理分析
【Java从发入门到精通】Java StringBuffer 和 StringBuilder 类
5G/4G外置型无线通信模块
05【Redis的发布订阅】
搜索多种格式文件工具
微信小程序开发学习1（小程序的入门知识）
Mac解决鼠标滚轮反方向移动逻辑--Mos（又免费又好用哦～）
【力扣-每日一题】901. 股票价格跨度
【你也能从零基础学会网站开发】Web建站之javascript入门篇 JavaScript中的Screen屏幕对象与Navigator浏览器信息对象
[GUET-CTF2019]zips

原文地址：https://blog.csdn.net/u013055678/article/details/126880675