放大镜

最新推荐文章于 2023-10-10 15:54:01 发布

微笑、不失礼471

最新推荐文章于 2023-10-10 15:54:01 发布

阅读量57

点赞数

文章标签： html html5 前端 javascript

本文链接：https://blog.csdn.net/weixin_55711841/article/details/126005044

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       *{
               margin: 0;
               padding: 0;
           }
           #small{
               width: 300px;
               height: 300px;
               background: url(1.jpg.jpg);
               background-size: cover;
           }
           #smallDiv{
               width: 100px;
               height: 100px;
               background-color: rgba(255,0,0,.2);
               display: none;
               position: absolute;
           }
           #bigDiv{
               width: 300px;
               height: 300px;
               position: absolute;
               left: 300px;
               top: 0;
               overflow: hidden;
               display: none;
           }
           #bigImg{
               width: 900px;
               height: 900px;
               position: absolute;
           }
       </style>
   </head>
   <body>
       <div class="fang">
           <div id="small">
               <div id="smallDiv"></div>
           </div>
           <div id="bigDiv">
               <img src="1.jpg.jpg"alt=""id="bigImg" />
           </div>
       </div>
       <script>
       var small=document.querySelector("#small")
       var smallDiv=document.querySelector("#smallDiv")
       var bigDiv=document.querySelector("#bigDiv")
       var bigImg=document.querySelector("#bigImg")
       small.οnmοuseοver=function(){
           smallDiv.style.display='block'
           bigDiv.style.display='block'
       }
       small.οnmοuseοut=function(){
          smallDiv.style.display='none'
          bigDiv.style.display='none'
       }
       small.οnmοusemοve=function(e){
           var e=e||window.event
           var x=e.clientX-50
           var y=e.clientY-50
           smallDiv.style.left=x+ 'px'
           smallDiv.style.top=y+ 'px'
           bigImg.style.left=-3*x+'px'
           bigImg.style.top=-3*y+'px'
       }
       </script>
   </body>
</html>