某宝购物页面图片放大镜效果

html部分

       <div class="left"></div>
       <div class="right"></div>

style部分

    .left{
        width: 300px;
        height: 300px;
        background-image: url(./1.jpg);
        background-size: 100% 100%;
        margin: 50px;
    }
    .right{
        width: 500px;
        height: 500px;
        background-image: url(./1.jpg);
        background-size: 200% 200%;
        background-repeat: no-repeat;
        position: absolute;
        border: 1px red solid;
        display: none;
    }

js部分

    //获取小盒子
    let left = document.querySelector(".left")
    //获取大盒子
    let right = document.querySelector(".right")
    
    right.style.left = left.offsetLeft + left.offsetWidth +"px"

    right.style.top = left.offsetTop  +"px"
    
    left.onmouseenter = () =>{
        right.style.display = "block"
    }
    left.onmouseleave = () =>{
        right.style.display = "none"
    }

    left.onmousemove = (e) =>{
        let x = e.pageX - left.offsetLeft
        let y = e.pageY - left.offsetTop

        x = x / left.offsetWidth
        y = y / left.offsetHeight

        x = (x * 100).toFixed(4) + "%"
        y = (y * 100).toFixed(4) + "%"

        right.style.backgroundPositionX = x
        right.style.backgroundPositionY = y
    }