js实现放大镜（带注释）

宁采不是臣
已于 2024-04-12 10:27:35 修改
阅读量123
点赞数 1
文章标签： javascript
于 2023-06-07 13:30:46 首次发布
本文链接：https://blog.csdn.net/weixin_57925162/article/details/131085812
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />

    <title>放大镜实现</title>

</head>

<body>
    <div class="spec-preview">
        <img src="/image/login.bg.optimized.png" />
        <div class="event1" id="event1" onmousemove="mouseMove(event)"></div>
        <div class="big">
            <img src="/image/login.bg.optimized.png" id="bigImg" />
        </div>
        <div class="mask"></div>
    </div>
</body>
<style>
    .spec-preview {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #ccc;
    }

    .spec-preview>img {
        width: 100%;
        height: 100%;
    }

    .event1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 998;
    }

    .mask {
        width: 50%;
        height: 50%;
        background-color: rgba(0, 255, 0, 0.3);
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }

    .big {
        width: 100%;
        height: 100%;
        position: absolute;
        top: -1px;
        left: 105%;
        border: 1px solid rgb(212, 11, 11);
        /* //把下面这行代码去掉，试着理解为什么上面需要乘以-2 */
        overflow: hidden;
        z-index: 998;
        display: none;
        background: white;
    }

    .big img {
        /* 这里的宽高实现放大两倍的效果 */
        width: 200%;
        max-width: 200%;
        height: 200%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .event1:hover+.big,
    .event1:hover~.mask {
        display: block;
    }
</style>
<script>
    // var event1=document.getElementById('event1')
    // console.log(event1)
    // 
    var bigs = document.querySelector('.big')

    //获取遮罩层dom实现遮罩层跟随鼠标位置移动
    var mask = document.querySelector('.mask')
    var big = document.getElementById('bigImg')
    function mouseMove(event) {

        // console.log(big.style)
        //offsetX：鼠标坐标到元素的左侧的距离
        //offsetWidth 除了外边距(margin)以外，所有的宽度(高度)之和
        let left = event.offsetX - mask.offsetWidth / 2;
        //offsetY：鼠标坐标到元素的顶部的距离
        //offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数
        let top = event.offsetY - mask.offsetHeight / 2;
        //  约束范围,保证光标在div范围内，都是以父盒子div为参考对象的
        //超出图片左侧
        if (left <= 0) left = 0;
        //超出图片右侧
        if (left >= mask.offsetWidth) left = mask.offsetWidth;
        if (top <= 0) top = 0;
        if (top >= mask.offsetHeight) top = mask.offsetHeight;
        //  修改元素的left|top属性值
        //遮罩层
        mask.style.left = left + "px";
        mask.style.top = top + "px";
        //放大镜，你向左移动鼠标，图片就是向右移动，运动方向是相反的
        //与css中width：200%，height：200%相对应，建议以后放大倍数为2n
        big.style.left = -2 * left + "px";
        big.style.top = -2 * top + "px";
    }

</script>

</html>








//html
       <div class="leyboxs ">
         <img :src="img" alt="" class="img1">
         <div class="event1" @mousemove="handleMouseOver" ></div>
         <div class="div2" ref="div2">
          <img :src="img" alt="" class="img2" ref="img2s">
         </div>
         <div class="mask" ref="mask"></div>
       </div>


//js
const mask = ref()
const img2s = ref()
const div2 = ref()
const handleMouseOver = (event: any) => {
    let left = event.offsetX - mask.value.offsetWidth / 2;
    let top = event.offsetY - mask.value.offsetHeight / 2;
    if (left <= 0) left = 0;
    if (left >= mask.value.offsetWidth) left = mask.value.offsetWidth;
    if (top <= 0) top = 0;
    if (top >= mask.value.offsetHeight) top = mask.value.offsetHeight;
    mask.value.style.left = left + "px";
    mask.value.style.top = top + "px";
    img2s.value.style.left = -2 * left + "px";
    img2s.value.style.top = -2 * top + "px";
}



//css
       .leyboxs {
                    width: 100%;
                    height: 83%;
                    position: relative;

                    .event1 {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 998;
                    }

                    .event1:hover+.div2,
                    .event1:hover~.mask {
                        display: block;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    .img1 {
                        cursor: pointer;
                    }

                    .div2 {
                        width: 100%;
                        height: 100%;
                        z-index: 9;
                        position: absolute;
                        right: -105%;
                        top: 0;
                        overflow: hidden;
                         display: none;

                        .img2 {
                            width: 200%;
                            max-width: 200%;
                            height: 200%;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                    }



                    .mask {
                        width: 50%;
                        height: 50%;
                        background-color: #387fd4;
                        opacity: .3;
                        position: absolute;
                        left: 0;
                        top: 0;
                         display: none;
                    }
                }