HTML和JS配合，显示类似于透视的效果

我想要达到的结果：
在网页里以我鼠标位置为圆心显示一个圈，这个圈的效果是显示另一个图片这个圈位置的图像，就像透视一样

    <style type="text/css">    
        .dow {
            width: 1800px;
            height: 800px;
            background-image: url("https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/515/515-bigskin-2.jpg");
        }
        img {
            clip-path: circle(15% at ??? ???);
        }
    style>
head>
<body>
    <div class = "dow"><img src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/199/199-bigskin-4.jpg" alt = ""/>div>
    <script>
        const mousImg = document.querySelector("img");
        document.onmousemove = function(e) {
            var e = e || window.event; 
            var x = e.pageX; 
            var y = e.pageY; 
            mousImg.??? = x /18 * 1%; 
            mousImg.??? = y /8 * 1% ;
        }
    script>
body>

是要这种效果吗

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box{
    width: 100%;
    min-height: 100%;
    position: relative;
    }
    .clicr{
    width:200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    box-shadow: 1px 1px 10px 1px gray;
    left: 0;
    top: 0;
    overflow: hidden;
    opacity: 0 ;
}
    .clicr img{ /*表示小圆圈里面的图片,即被放大的部分*/
    position: absolute;
    left: 0;
    top: 0;
}

    </style>
</head>
<body>
        <div class="box">
             <img src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/199/199-bigskin-4.jpg" alt="" width="100%">
             <div class="clicr">
                 <img src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/199/199-bigskin-4.jpg" alt="" >
             </div> 
        </div>
   
    <script>
        const box = document.querySelector(".box");
        const clicr = document.querySelector(".clicr");
        const bigImg = document.querySelector(".clicr img"); //放大镜图片
        box.addEventListener('mousemove',function(e){
        clicr.style.opacity="1"; //只有在图片内才显示

        let clicrLeft = e.clientX - box.offsetLeft - clicr.offsetWidth/2;//让鼠标在放大镜中间
        let clicrTop = e.clientY -  box.offsetTop - clicr.offsetHeight/2;

        clicr.style.left = clicrLeft + "px";//放大镜相对于box的偏移量
        clicr.style.top = clicrTop + "px";
        
        let bigImgLeft = (clicrLeft + clicr.offsetWidth)/box.offsetWidth * bigImg.offsetWidth - clicr.offsetWidth; //得到放大镜里图片的位置
        let bigImgTop = (clicrTop + clicr.offsetHeight)/box.offsetHeight * bigImg.offsetHeight - clicr.offsetHeight;

        bigImg.style.left=  -bigImgLeft + "px";
        bigImg.style.top=  -bigImgTop + "px";

    })

    </script>
</body>
</html>

应该是设置透明度属性，https://m.php.cn/article/402525.html

效果差不多就像这样

img


要让中间那个圆的圆心跟着我鼠标移动