JS 图片放大镜

小灰灰 2023-01-09 15:56 138阅读 0赞

#   需求： #

1.小遮罩可以随鼠标在小盒子上移动

2.遮罩层有自己的移动范围

3.鼠标在遮罩层的中心

4.大盒子默认是隐藏的。

5.当鼠标停留在小盒子上时，大盒子显示

6.当鼠标在小盒子上移动时，按比例移动。

效果图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]

上代码！

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            #sbox {
                position: absolute;
                left: 100px;
                top: 100px;
            }
            
            #sbox img {
                width: 480px;
            }
            
            #bbox {
                width: 385px;
                position: absolute;
                height: 385px;
                left: 650px;
                top: 100px;
                overflow: hidden;
                display: none;
            }
            
            #son {
                width: 120px;
                height: 120px;
                background-color: #fff;
                opacity: .5;
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }
            
            #bbox img {
                width: 1540px;
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
        <script>
            window.onload = function() {
                function $(str) {
                    return document.querySelector(str);
    
                }
                var sbox = $("#sbox");
                var bbox = $("#bbox");
                var son = $("#son");
                var bimg = $("#bbox img");
    
                // 鼠标移入显示
                sbox.onmouseover = function() {
    
                        bbox.style.display = "block";
                        son.style.display = "block";
                    }
                    // 移出隐藏
                sbox.onmouseout = function() {
    
                    bbox.style.display = "none";
                    son.style.display = "none";
                }
                sbox.onmousemove = function(event) {
                    var event = event || window.event;
                    // 获取遮罩位移
                    var l = event.pageX - sbox.offsetLeft - son.offsetWidth / 2;
                    var t = event.pageY - sbox.offsetTop - son.offsetHeight / 2;
                    // 判断位移范围
                    if (l <= 0) {
                        l = 0;
                    }
                    if (t <= 0) {
                        t = 0;
                    }
                    if (l >= sbox.offsetWidth - son.offsetWidth) {
                        l = sbox.offsetWidth - son.offsetWidth;
                    }
                    if (t >= sbox.offsetHeight - son.offsetHeight) {
                        t = sbox.offsetHeight - son.offsetHeight
                    }
                    // 遮罩的位置
                    son.style.left = l + "px";
                    son.style.top = t + "px"
                        //获取比例
                    var s = (bimg.offsetWidth - bbox.offsetWidth) / (sbox.offsetWidth - son.offsetWidth);
                    // 大图片位移量
                    bimg.style.left = -l * s + "px";
                    bimg.style.top = -t * s + "px";
    
                }
            }
        </script>
    </head>
    
    <body>
        <div id="sbox">
            <img src="./img/ae20084a88ce11e47eb267acc53f86e5.jpg" alt="">
            <div id="son"></div>
        </div>
        <div id="bbox"><img src="./img/ae20084a88ce11e47eb267acc53f86e5.jpg" alt=""></div>
    </body>
    
    </html>

### 注意：遮罩的宽高比小图片快高，要和大盒子的宽高比大图片的宽高的比例一样 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221119/033da5c360d9492890b5e623f6e0d6f9.png