放大镜

最新推荐文章于 2021-11-25 23:50:23 发布
原创最新推荐文章于 2021-11-25 23:50:23 发布 · 165 阅读
CC 4.0 BY-SA版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0}
        .box{
            width: 600px;
            height: 500px;
            display: flex;
            justify-content: space-between;
        }
        .img1{
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        .img5{
            width: 300px;
        }
        .img2{
            width: 300px;
            height: 300px;
            overflow: hidden;
            display: none;
        }

        .case{
            width: 100px;
            height: 100px;
            background: rgba(247,100,44,0.4);
            position: absolute;
            display: none;
        }

    </style>
</head>
<body>
<div class="box">
   <div class="img1"><div class="case"></div><img src="timg.jpg" class="img5"></div>
    <div class="img2"><img src="timg.jpg" class="img4"></div>
</div>
    <script>
        var img1=document.getElementsByClassName("img1")[0];
        var img2=document.getElementsByClassName("img2")[0];
        var box1=document.getElementsByClassName("case")[0];
        var img4=document.getElementsByClassName("img4")[0];
          img1.onmousemove=function (ev) {
              var evt=window.event||ev;
              box1.style.display="block";
              img2.style.display="block";
              box1.style.left=evt.clientX-box1.offsetWidth/2+"px";
              box1.style.top=evt.clientY-box1.offsetHeight/2+"px";
              if(evt.clientX<50){
                  box1.style.left=0;
              }
              if(evt.clientX>=50 && evt.clientX<250){
                  box1.style.left=ev.clientX-50+"px";
              }
              if(evt.clientX>=250 && evt.clientX<=300){
                  box1.style.left=200+"px";
              }

              if(evt.clientY<50){
                  box1.style.top=0
              }
              if(evt.clientY>=50 && evt.clientY<250){
                  box1.style.top=ev.clientY-50+"px";
              }
              if(evt.clientY>=250 && evt.clientY<=300){
                  box1.style.top=200+"px"
              }
              img4.style.marginLeft=-(parseInt(box1.style.left))+"px";
              img4.style.marginTop=-(parseInt(box1.style.top))+"px";
          };
          img1.onmouseout=function () {
              box1.style.display="none";
              img2.style.display="none";
          };
          box1.onmouseover=function (ev) {
              var evt=window.event||ev;
              box1.style.display="block";
              img2.style.display="block";
              box1.style.left=evt.clientX-box1.offsetWidth/2+"px";
              box1.style.top=evt.clientY-box1.offsetHeight/2+"px";
              if(evt.clientX<50){
                  box1.style.left=0;
              }
              if(evt.clientX>=50 && evt.clientX<250){
                  box1.style.left=ev.clientX-50+"px";
              }
              if(evt.clientX>=250 && evt.clientX<=300){
                  box1.style.left=200+"px";
              }

              if(evt.clientY<50){
                  box1.style.top=0
              }
              if(evt.clientY>=50 && evt.clientY<250){
                  box1.style.top=ev.clientY-50+"px";
              }
              if(evt.clientY>=250 && evt.clientY<=300){
                  box1.style.top=200+"px"
              }
              img4.style.marginLeft=-(parseInt(box1.style.left))+"px";
              img4.style.marginTop=-(parseInt(box1.style.top))+"px";
          }

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