Y海森伯格Y 2022-07-31 11:06 采纳率: 66.7%
浏览 69
已结题

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 12: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日

悬赏问题

  • ¥20 macmin m 4连接iPad
  • ¥15 DBIF_REPO_SQL_ERROR
  • ¥15 根据历年月数据,用Stata预测未来六个月汇率
  • ¥15 DevEco studio开发工具 真机联调找不到手机设备
  • ¥15 请教前后端分离的问题
  • ¥100 冷钱包突然失效,急寻解决方案
  • ¥15 下载honeyd时报错 configure: error: you need to instal a more recent version of libdnet
  • ¥15 距离软磁铁一定距离的磁感应强度大小怎么求
  • ¥15 霍尔传感器hmc5883l的xyz轴输出和该点的磁感应强度大小的关系是什么
  • ¥15 vscode开发micropython,import模块出现异常
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部