dom之原生js放大镜

放大镜

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      position: relative;
      width: 400px;
      height: 300px;
      background: url("../img/770EC837-667F-4DB5-9D0B-C0C84CF479C4.jpg");
      background-size: 400px 300px;
    }
    .slider{
      position: absolute;
      width: 100px;
      height: 100px;
      background: black;

      opacity: 0.3;
    }
    .small{
      position: absolute;
      width: 100px;
      height: 100px;
      background: url("../img/770EC837-667F-4DB5-9D0B-C0C84CF479C4.jpg");
      top: 0;
      right: -330px;
      background-size: 400px 300px;
      /*background-position: 100px -100px;*/

      transform: scale(1.8);
    }
  </style>
</head>
<body>
<div class="box">
  <div class="slider">

  </div>
  <div class="small"></div>
</div>

</body>
</html>

<script type="text/javascript">
  var slider = document.querySelector(".slider");
  var small = document.querySelector(".small");


  //鼠标按下
  slider.onmousedown=function (event){
      var e=event||window.event;

      var startX=e.offsetX;
      var startY=e.offsetY;

      //鼠标移动
      document.onmouseover=function (event){
          var e1=event||window.event;

          var l=e1.clientX-startX;
          if(l<=0) l=0;
          if(l>=300) l=300;
          slider.style.left=l+"px";

          var t=e1.clientY-startY;
          if(t<=0) t=0;
          if(t>=200) t=200;
          slider.style.top=t+"px";

          //修改小图的背景定位
          small.style.backgroundPosition="-"+l+"px"+t+"px";
      }

  }

  //鼠标抬起
  slider.onmouseup=function (event){
      document.onmouseover=null;
  }
</script>
posted @ 2023-03-11 01:03  King-DA  阅读(15)  评论(0)    收藏  举报