Y海森伯格Y 2022-07-31 19:06 采纳率: 80%
浏览 68
已结题

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>
  • 写回答

3条回答 默认 最新

  • Dream.Luffy 2022-08-01 20:29
    关注

    是要这种效果吗

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 8月3日
  • 已采纳回答 8月3日
  • 创建了问题 7月31日

悬赏问题

  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥15 想问一下树莓派接上显示屏后出现如图所示画面，是什么问题导致的
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染