• 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
  • 相关阅读:
    MongoDB基础详解
    数据结构的结构复杂度你了解么
    机器学习简介
    idea彻底卸载安装及配置笔记
    Java程序员不得不会的124道面试题(含答案)
    element ui tree树形控件实现单选操作
    GPT+RPA用于自动流转分配,助力优化信访工作流程
    python中的none
    学习c#的第二十天
    SQL必需掌握的100个重要知识点:IN 操作符
  • 原文地址:https://blog.csdn.net/u013055678/article/details/126880675