HTML/CSS实现图片悬停缩放效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52840130/article/details/134957702

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           *{
               padding: 0;
               margin: 0;
           }
           .show{
               width: 200px;
               height: 200px;
               border: 1px solid black;
               position: relative;
           }
           .show img{
               width: 100%;
               height: 100%;
           }
           .hidden{
               width: 200px;
               height: 200px;
               border: 1px solid black;
               overflow: hidden;
               display: none;
               position: relative;
           }
           .hidden img{
               width: 400px;
               height: 400px;
               position: absolute;

           }
           span{
               width: 100px;
               height: 100px;
               background-color: red;
               position: absolute;
               top: 0;
               left: 0;
               opacity: 0.5;
               display: none;
           }
       </style>
   </head>
   <body>
       <div class="show">
           <img src="img/1.jpg">
           <span></span>
       </div>
       <div class="hidden">
           <img src="img/1.jpg">
       </div>
       <script>
           var span=document.querySelector('span')
           var show=document.querySelector('.show')
           var img=document.querySelector('.hidden')
           var img1=document.querySelector('.hidden img')
           show.οnmοuseοver=function(){
               span.style.display='block'
               img.style.display='block'
           }
           show.οnmοuseοut=function(){
               span.style.display='none'
                   img.style.display='none'
           }
           show.οnmοusemοve=function(e){
               var x=e.clientX-span.offsetWidth/2
               var y=e.clientY-span.offsetHeight/2
               if(x<=0){
                   x=0
               }
               else if(x>=show.offsetWidth-span.offsetWidth){
                   x=show.offsetWidth-span.offsetWidth
               }
               if(y<=0){
                   y=0
               }
               else if(y>=show.offsetHeight-span.offsetHeight){
                   y=show.offsetHeight-span.offsetHeight
               }
               span.style.left=x+'px'
               span.style.top=y+'px'
               var w=x/(show.offsetWidth-span.offsetWidth)
               var h=y/(show.offsetHeight-span.offsetHeight)
               img1.style.left=w*(img.offsetWidth-img1.offsetWidth)+'px'
               img1.style.top=h*(img.offsetHeight-img1.offsetHeight)+'px'
           }
       </script>
   </body>
</html>

js放大镜